Jquery AutoComplete的使用方法实例.doc

Jquery AutoComplete的使用方法实例jQuery的Autocomplete（自动完成、自动填充）插件有不少，但比较下来我感觉，还是bassistance.de的JQueryAutocomplete plugin比较强大，我们就来写一些代码感受一下。jquery-autocomplete配置：首先是一个最简单的Autocomplete（自动完成）代码片段：123AutoComplate45678$(function()9vardata=CoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilities.split();1011$(#keyword).autocomplete(data).result(function(event,data,formatted)12alert(data);13);14);1516171819202122232425result方法是jQuery Autocomplete插件里的重要方法，它在用户在选定了某个条目时触发。data参数为选中的数据。一个稍微复杂的例子，可以自定义提示列表:123自定义提示45678varemails=9name:PeterPan,to:peterpan.de,10name:Molly,to:,11name:ForneriaMarconi,to:livejapan.jp,12name:MasterSync,to:205,13name:Dr.TechdeLog,to:,14name:DonCorleone,to:,15name:McChick,to:,16name:DonnieDarko,to:,17name:QuakeTheNet,to:,18name:Dr.Write,to:,19name:GGBond,to:B,20name:ZhuzhuXia,to:21;2223$(function()24$(#keyword).autocomplete(emails,25max:12,/列表里的条目数26minChars:0,/自动完成激活之前填入的最小字符27width:400,/提示的宽度，溢出隐藏28scrollHeight:300,/提示的高度，溢出显示滚动条29matchContains:true,/包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示30autoFill:false,/自动填充31formatItem:function(row,i,max)32returni+/+max+:++row.to+;33,34formatMatch:function(row,i,max)35+row.to;36,37formatResult:function(row)38returnrow.to;3940).result(function(event,row,formatted)41alert(row.to);42);43);4445464748495051525354formatItem、formatMatch、formatResult是自定提示信息的关键。formatItem作用在于可以格式化列表中的条目，比如我们加了“I”，让列表里的字显示出了斜体。formatMatch是配合formatItem使用，作用在于，由于使用了formatItem，所以条目中的内容有所改变，而我们要匹配的是原始的数据