Jquery AutoComplete的使用方法实例

<p>jQuery的Autocomplete(自动完成、自动填充)插件有不少,但比较下来我感觉,还是bassistance.de的JQuery Autocomplete plugin比较强大,我们就来写一些代码感受一下。</p><p></p><p>jquery-autocomplete配置:</p><p>&lt;script type=&quot;text/javascript&quot; src=&quot;/js/jquery-1.4.2.min.js&quot;&gt;&lt;/script&gt;</p><p>&lt;script type=&quot;text/javascript&quot; src=&quot;/js/jquery.autocomplete.min.js&quot;&gt;&lt;/script&gt;</p><p>&lt;link rel=&quot;Stylesheet&quot; href=&quot;/js/jquery.autocomplete.css&quot; /&gt;</p><p></p><p>首先是一个最简单的Autocomplete(自动完成)代码片段:</p><pre class="brush:html;toolbar:false">1&lt;htmlxmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt; 2&lt;headrunat=&quot;server&quot;&gt; 3&lt;title&gt;AutoComplate&lt;/title&gt; 4&lt;scripttype=&quot;text/javascript&quot;src=&quot;/js/jquery-1.4.2.min.js&quot;&gt;&lt;/script&gt; 5&lt;scripttype=&quot;text/javascript&quot;src=&quot;/js/jquery.autocomplete.min.js&quot;&gt;&lt;/script&gt; 6&lt;linkrel=&quot;Stylesheet&quot;href=&quot;/js/jquery.autocomplete.css&quot;/&gt; 7&lt;scripttype=&quot;text/javascript&quot;&gt; 8$(function(){ 9vardata=&quot;CoreSelectorsAttributesTraversingManipulationCSSEventsEffectsAjaxUtilities&quot;.split(&quot;&quot;); 10 11$(&#39;#keyword&#39;).autocomplete(data).result(function(event,data,formatted){ 12alert(data); 13}); 14}); 15&lt;/script&gt; 16&lt;/head&gt; 17&lt;body&gt; 18&lt;formid=&quot;form1&quot;runat=&quot;server&quot;&gt; 19&lt;div&gt; 20&lt;inputid=&quot;keyword&quot;/&gt; 21&lt;inputid=&quot;getValue&quot;value=&quot;GetValue&quot;type=&quot;button&quot;/&gt; 22&lt;/div&gt; 23&lt;/form&gt; 24&lt;/body&gt; 25&lt;/html&gt;</pre><p>result方法是jQuery Autocomplete插件里的重要方法,它在用户在选定了某个条目时触发。data参数为选中的数据。</p><p></p><p>一个稍微复杂的例子,可以自定义提示列表:</p><pre class="brush:js;toolbar:false">1&lt;htmlxmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt; 2&lt;headrunat=&quot;server&quot;&gt; 3&lt;title&gt;自定义提示&lt;/title&gt; 4&lt;scripttype=&quot;text/javascript&quot;src=&quot;/js/jquery-1.4.2.min.js&quot;&gt;&lt;/script&gt; 5&lt;scripttype=&quot;text/javascript&quot;src=&quot;/js/jquery.autocomplete.min.js&quot;&gt;&lt;/script&gt; 6&lt;linkrel=&quot;Stylesheet&quot;href=&quot;/js/jquery.autocomplete.css&quot;/&gt; 7&lt;scripttype=&quot;text/javascript&quot;&gt; 8varemails=[ 9{name:&quot;PeterPan&quot;,to:&quot;peter@pan.de&quot;}, 10{name:&quot;Molly&quot;,to:&quot;molly@yahoo.com&quot;}, 11{name:&quot;ForneriaMarconi&quot;,to:&quot;live@japan.jp&quot;}, 12{name:&quot;Master&lt;em&gt;Sync&lt;/em&gt;&quot;,to:&quot;205bw@samsung.com&quot;}, 13{name:&quot;Dr.&lt;strong&gt;Tech&lt;/strong&gt;deLog&quot;,to:&quot;g15@logitech.com&quot;}, 14{name:&quot;DonCorleone&quot;,to:&quot;don@vegas.com&quot;}, 15{name:&quot;McChick&quot;,to:&quot;info@donalds.org&quot;}, 16{name:&quot;DonnieDarko&quot;,to:&quot;dd@timeshift.info&quot;}, 17{name:&quot;QuakeTheNet&quot;,to:&quot;webmaster@quakenet.org&quot;}, 18{name:&quot;Dr.Write&quot;,to:&quot;write@writable.com&quot;}, 19{name:&quot;GGBond&quot;,to:&quot;Bond@qq.com&quot;}, 20{name:&quot;ZhuzhuXia&quot;,to:&quot;zhuzhu@qq.com&quot;} 21]; 22 23$(function(){ 24$(&#39;#keyword&#39;).autocomplete(emails,{ 25max:12,//列表里的条目数 26minChars:0,//自动完成激活之前填入的最小字符 27width:400,//提示的宽度,溢出隐藏 28scrollHeight:300,//提示的高度,溢出显示滚动条 29matchContains:true,//包含匹配,就是data参数里的数据,是否只要包含文本框里的数据就显示 30autoFill:false,//自动填充 31formatItem:function(row,i,max){ 32returni+&#39;/&#39;+max+&#39;:&quot;&#39;+row.name+&#39;&quot;[&#39;+row.to+&#39;]&#39;; 33}, 34formatMatch:function(row,i,max){ 35returnrow.name+row.to; 36}, 37formatResult:function(row){ 38returnrow.to; 39} 40}).result(function(event,row,formatted){ 41alert(row.to); 42}); 43}); 44&lt;/script&gt; 45&lt;/head&gt; 46&lt;body&gt; 47&lt;formid=&quot;form1&quot;runat=&quot;server&quot;&gt; 48&lt;div&gt; 49&lt;inputid=&quot;keyword&quot;/&gt; 50&lt;inputid=&quot;getValue&quot;value=&quot;GetValue&quot;type=&quot;button&quot;/&gt; 51&lt;/div&gt; 52&lt;/form&gt; 53&lt;/body&gt; 54&lt;/html&gt;</pre><p>formatItem、formatMatch、formatResult是自定提示信息的关键。</p><p>formatItem作用在于可以格式化列表中的条目,比如我们加了&quot;I&quot;,让列表里的字显示出了斜体。</p><p>formatMatch是配合formatItem使用,作用在于,由于使用了formatItem,所以条目中的内容有所改变,而我们要匹配的是原始的数据,所以用formatMatch做一个调整,使之匹配原始数据,</p><p>formatResult是定义最终返回的数据,比如我们还是要返回原始数据,而不是formatItem过的数据。</p><p></p>
RangeTime:0.011436s
RangeMem:211.61 KB
返回顶部 留言