jQuery UI 实例 - 自动完成(Autocomplete)

<p>根据用户输入值进行搜索和过滤,让用户快速找到并从预设值列表中选择。</p><p>如需了解更多有关 autocomplete 部件的细节,请查看 API 文档 自动完成部件(Autocomplete Widget)。</p><p>本章节使用到 search.php 下载。</p><p>默认功能</p><p>当您在输入域中输入时,自动完成(Autocomplete)部件提供相应的建议。在本实例中,提供了编程语言的建议选项,您可以输入 &quot;ja&quot; 尝试一下,可以得到 Java 或 JavaScript。</p><p>数据源是一个简单的 JavaScript 数组,使用 source 选项提供给部件。</p><pre class="brush:html;toolbar:false">&lt;!doctypehtml&gt; &lt;html&gt; &lt;head&gt; &lt;metacharset=&quot;utf-8&quot;&gt; &lt;title&gt;jQueryUI自动完成(Autocomplete)-默认功能&lt;/title&gt; &lt;linkrel=&quot;stylesheet&quot;href=&quot;//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css&quot;&gt; &lt;scriptsrc=&quot;//code.jquery.com/jquery-1.9.1.js&quot;&gt;&lt;/script&gt; &lt;scriptsrc=&quot;//code.jquery.com/ui/1.10.4/jquery-ui.js&quot;&gt;&lt;/script&gt; &lt;linkrel=&quot;stylesheet&quot;href=&quot;http://jqueryui.com/resources/demos/style.css&quot;&gt; &lt;script&gt; $(function(){ varavailableTags=[ &quot;ActionScript&quot;, &quot;AppleScript&quot;, &quot;Asp&quot;, &quot;BASIC&quot;, &quot;C&quot;, &quot;C++&quot;, &quot;Clojure&quot;, &quot;COBOL&quot;, &quot;ColdFusion&quot;, &quot;Erlang&quot;, &quot;Fortran&quot;, &quot;Groovy&quot;, &quot;Haskell&quot;, &quot;Java&quot;, &quot;JavaScript&quot;, &quot;Lisp&quot;, &quot;Perl&quot;, &quot;PHP&quot;, &quot;Python&quot;, &quot;Ruby&quot;, &quot;Scala&quot;, &quot;Scheme&quot; ]; $(&quot;#tags&quot;).autocomplete({ source:availableTags }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div&gt; &lt;labelfor=&quot;tags&quot;&gt;标签:&lt;/label&gt; &lt;inputid=&quot;tags&quot;&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre><p>包含重音</p><p>autocomplete 域使用自定义的 source 选项来匹配带有重音字符的结果项,即使文本域不包含重音字符也会匹配。但是如果您在文本域中键入了重音字符,则不会显示非重音的结果项。</p><p>尝试键入 &quot;Jo&quot;,会看到 &quot;John&quot; 和 &quot;Jörn&quot;,然后 键入 &quot;Jö&quot;,只会看到 &quot;Jörn&quot;。</p><pre class="brush:html;toolbar:false">&lt;!doctypehtml&gt; &lt;html&gt; &lt;head&gt; &lt;metacharset=&quot;utf-8&quot;&gt; &lt;title&gt;jQueryUI自动完成(Autocomplete)-包含重音&lt;/title&gt; &lt;linkrel=&quot;stylesheet&quot;href=&quot;//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css&quot;&gt; &lt;scriptsrc=&quot;//code.jquery.com/jquery-1.9.1.js&quot;&gt;&lt;/script&gt; &lt;scriptsrc=&quot;//code.jquery.com/ui/1.10.4/jquery-ui.js&quot;&gt;&lt;/script&gt; &lt;linkrel=&quot;stylesheet&quot;href=&quot;http://jqueryui.com/resources/demos/style.css&quot;&gt; &lt;script&gt; $(function(){ varnames=[&quot;JörnZaefferer&quot;,&quot;ScottGonzález&quot;,&quot;JohnResig&quot;]; varaccentMap={ &quot;á&quot;:&quot;a&quot;, &quot;ö&quot;:&quot;o&quot; }; varnormalize=function(term){ varret=&quot;&quot;; for(vari=0;i&lt;term.length;i++){ ret+=accentMap[term.charAt(i)]||term.charAt(i); } returnret; }; $(&quot;#developer&quot;).autocomplete({ source:function(request,response){ varmatcher=newRegExp($.ui.autocomplete.escapeRegex(request.term),&quot;i&quot;); response($.grep(names,function(value){ value=value.label||value.value||value; returnmatcher.test(value)||matcher.test(normalize(value)); })); } }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div&gt; &lt;form&gt; &lt;labelfor=&quot;developer&quot;&gt;开发人员:&lt;/label&gt; &lt;inputid=&quot;developer&quot;&gt; &lt;/form&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre><p>分类</p><p>分类的搜索结果。尝试键入 &quot;a&quot; 或 &quot;n&quot;。</p><pre class="brush:html;toolbar:false">&lt;!doctypehtml&gt; &lt;html&gt; &lt;head&gt; &lt;metacharset=&quot;utf-8&quot;&gt; &lt;title&gt;jQueryUI自动完成(Autocomplete)-分类&lt;/title&gt; &lt;linkrel=&quot;stylesheet&quot;href=&quot;//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css&quot;&gt; &lt;scriptsrc=&quot;//code.jquery.com/jquery-1.9.1.js&quot;&gt;&lt;/script&gt; &lt;scriptsrc=&quot;//code.jquery.com/ui/1.10.4/jquery-ui.js&quot;&gt;&lt;/script&gt; &lt;linkrel=&quot;stylesheet&quot;href=&quot;http://jqueryui.com/resources/demos/style.css&quot;&gt; &lt;style&gt; .ui-autocomplete-category{ font-weight:bold; padding:.2em.4em; margin:.8em0.2em; line-height:1.5; } &lt;/style&gt; &lt;script&gt; $.widget(&quot;custom.catcomplete&quot;,$.ui.autocomplete,{ _renderMenu:function(ul,items){ varthat=this, currentCategory=&quot;&quot;; $.each(items,function(index,item){ if(item.category!=currentCategory){ ul.append(&quot;&lt;li&gt;&quot;+item.category+&quot;&lt;/li&gt;&quot;); currentCategory=item.category; } that._renderItemData(ul,item); }); } }); &lt;/script&gt; &lt;script&gt; $(function(){ vardata=[ {label:&quot;anders&quot;,category:&quot;&quot;}, {label:&quot;andreas&quot;,category:&quot;&quot;}, {label:&quot;antal&quot;,category:&quot;&quot;}, {label:&quot;annhhx10&quot;,category:&quot;Products&quot;}, {label:&quot;annkK12&quot;,category:&quot;Products&quot;}, {label:&quot;annttopC13&quot;,category:&quot;Products&quot;}, {label:&quot;andersandersson&quot;,category:&quot;People&quot;}, {label:&quot;andreasandersson&quot;,category:&quot;People&quot;}, {label:&quot;andreasjohnson&quot;,category:&quot;People&quot;} ]; $(&quot;#search&quot;).catcomplete({ delay:0, source:data }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;labelfor=&quot;search&quot;&gt;搜索:&lt;/label&gt; &lt;inputid=&quot;search&quot;&gt; &lt;/body&gt; &lt;/html&gt;</pre><p>组合框(Combobox)</p><p>一个由 Autocomplete 和 Button 创建的自定义部件。您可以键入一些字符,来获得基于您的输入过滤的结果,或者使用按钮从完整列表中选择。</p><p>该输入是从一个已有的 select 元素中读取,传递给带有自定义的 source 选项的 Autocomplete。</p><p>这是一个不被支持的不完美的部件。这里纯粹是为了演示 autocomplete 定制功能。如需了解更多有关该部件工作原理的细节,请点击这里查看相关的 jQuery 文章。</p><pre class="brush:html;toolbar:false">&lt;!doctypehtml&gt; &lt;html&gt; &lt;head&gt; &lt;metacharset=&quot;utf-8&quot;&gt; &lt;title&gt;jQueryUI自动完成(Autocomplete)-组合框(Combobox)&lt;/title&gt; &lt;linkrel=&quot;stylesheet&quot;href=&quot;//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css&quot;&gt; &lt;scriptsrc=&quot;//code.jquery.com/jquery-1.9.1.js&quot;&gt;&lt;/script&gt; &lt;scriptsrc=&quot;//code.jquery.com/ui/1.10.4/jquery-ui.js&quot;&gt;&lt;/script&gt; &lt;linkrel=&quot;stylesheet&quot;href=&quot;http://jqueryui.com/resources/demos/style.css&quot;&gt; &lt;style&gt; .custom-combobox{ position:relative; display:inline-block; } .custom-combobox-toggle{ position:absolute; top:0; bottom:0; margin-left:-1px; padding:0; /*支持:IE7*/ *height:1.7em; *top:0.1em; } .custom-combobox-input{ margin:0; padding:0.3em; } &lt;/style&gt; &lt;script&gt; (function($){ $.widget(&quot;custom.combobox&quot;,{ _create:function(){ this.wrapper=$(&quot;&lt;span&gt;&quot;) .addClass(&quot;custom-combobox&quot;) .insertAfter(this.element); this.element.hide(); this._createAutocomplete(); this._createShowAllButton(); }, _createAutocomplete:function(){ varselected=this.element.children(&quot;:selected&quot;), value=selected.val()?selected.text():&quot;&quot;; this.input=$(&quot;&lt;input&gt;&quot;) .appendTo(this.wrapper) .val(value) .attr(&quot;title&quot;,&quot;&quot;) .addClass(&quot;custom-combobox-inputui-widgetui-widget-contentui-state-defaultui-corner-left&quot;) .autocomplete({ delay:0, minLength:0, source:$.proxy(this,&quot;_source&quot;) }) .tooltip({ tooltipClass:&quot;ui-state-highlight&quot; }); this._on(this.input,{ autocompleteselect:function(event,ui){ ui.item.option.selected=true; this._trigger(&quot;select&quot;,event,{ item:ui.item.option }); }, autocompletechange:&quot;_removeIfInvalid&quot; }); }, _createShowAllButton:function(){ varinput=this.input, wasOpen=false; $(&quot;&lt;a&gt;&quot;) .attr(&quot;tabIndex&quot;,-1) .attr(&quot;title&quot;,&quot;ShowAllItems&quot;) .tooltip() .appendTo(this.wrapper) .button({ icons:{ primary:&quot;ui-icon-triangle-1-s&quot; }, text:false }) .removeClass(&quot;ui-corner-all&quot;) .addClass(&quot;custom-combobox-toggleui-corner-right&quot;) .mousedown(function(){ wasOpen=input.autocomplete(&quot;widget&quot;).is(&quot;:visible&quot;); }) .click(function(){ input.focus(); //如果已经可见则关闭 if(wasOpen){ return; } //传递空字符串作为搜索的值,显示所有的结果 input.autocomplete(&quot;search&quot;,&quot;&quot;); }); }, _source:function(request,response){ varmatcher=newRegExp($.ui.autocomplete.escapeRegex(request.term),&quot;i&quot;); response(this.element.children(&quot;option&quot;).map(function(){ vartext=$(this).text(); if(this.value&amp;&amp;(!request.term||matcher.test(text))) return{ label:text, value:text, option:this }; })); }, _removeIfInvalid:function(event,ui){ //选择一项,不执行其他动作 if(ui.item){ return; } //搜索一个匹配(不区分大小写) varvalue=this.input.val(), valueLowerCase=value.toLowerCase(), valid=false; this.element.children(&quot;option&quot;).each(function(){ if($(this).text().toLowerCase()===valueLowerCase){ this.selected=valid=true; returnfalse; } }); //找到一个匹配,不执行其他动作 if(valid){ return; } //移除无效的值 this.input .val(&quot;&quot;) .attr(&quot;title&quot;,value+&quot;didn&#39;tmatchanyitem&quot;) .tooltip(&quot;open&quot;); this.element.val(&quot;&quot;); this._delay(function(){ this.input.tooltip(&quot;close&quot;).attr(&quot;title&quot;,&quot;&quot;); },2500); this.input.data(&quot;ui-autocomplete&quot;).term=&quot;&quot;; }, _destroy:function(){ this.wrapper.remove(); this.element.show(); } }); })(jQuery); $(function(){ $(&quot;#combobox&quot;).combobox(); $(&quot;#toggle&quot;).click(function(){ $(&quot;#combobox&quot;).toggle(); }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div&gt; &lt;label&gt;您喜欢的编程语言:&lt;/label&gt; &lt;selectid=&quot;combobox&quot;&gt; &lt;optionvalue=&quot;&quot;&gt;请选择...&lt;/option&gt; &lt;optionvalue=&quot;ActionScript&quot;&gt;ActionScript&lt;/option&gt; &lt;optionvalue=&quot;AppleScript&quot;&gt;AppleScript&lt;/option&gt; &lt;optionvalue=&quot;Asp&quot;&gt;Asp&lt;/option&gt; &lt;optionvalue=&quot;BASIC&quot;&gt;BASIC&lt;/option&gt; &lt;optionvalue=&quot;C&quot;&gt;C&lt;/option&gt; &lt;optionvalue=&quot;C++&quot;&gt;C++&lt;/option&gt; &lt;optionvalue=&quot;Clojure&quot;&gt;Clojure&lt;/option&gt; &lt;optionvalue=&quot;COBOL&quot;&gt;COBOL&lt;/option&gt; &lt;optionvalue=&quot;ColdFusion&quot;&gt;ColdFusion&lt;/option&gt; &lt;optionvalue=&quot;Erlang&quot;&gt;Erlang&lt;/option&gt; &lt;optionvalue=&quot;Fortran&quot;&gt;Fortran&lt;/option&gt; &lt;optionvalue=&quot;Groovy&quot;&gt;Groovy&lt;/option&gt; &lt;optionvalue=&quot;Haskell&quot;&gt;Haskell&lt;/option&gt; &lt;optionvalue=&quot;Java&quot;&gt;Java&lt;/option&gt; &lt;optionvalue=&quot;JavaScript&quot;&gt;JavaScript&lt;/option&gt; &lt;optionvalue=&quot;Lisp&quot;&gt;Lisp&lt;/option&gt; &lt;optionvalue=&quot;Perl&quot;&gt;Perl&lt;/option&gt; &lt;optionvalue=&quot;PHP&quot;&gt;PHP&lt;/option&gt; &lt;optionvalue=&quot;Python&quot;&gt;Python&lt;/option&gt; &lt;optionvalue=&quot;Ruby&quot;&gt;Ruby&lt;/option&gt; &lt;optionvalue=&quot;Scala&quot;&gt;Scala&lt;/option&gt; &lt;optionvalue=&quot;Scheme&quot;&gt;Scheme&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;buttonid=&quot;toggle&quot;&gt;显示基础的选择框&lt;/button&gt; &lt;/body&gt; &lt;/html&gt;</pre><p>自定义数据并显示</p><p>您可以使用自定义数据格式,并通过简单地重载默认的聚焦和选择行为来显示数据。</p><p>尝试键入 &quot;j&quot;,或者按向下箭头按键,即可得到一个项目列表。</p><pre class="brush:html;toolbar:false">&lt;!doctypehtml&gt; &lt;html&gt; &lt;head&gt; &lt;metacharset=&quot;utf-8&quot;&gt; &lt;title&gt;jQueryUI自动完成(Autocomplete)-自定义数据并显示&lt;/title&gt; &lt;linkrel=&quot;stylesheet&quot;href=&quot;//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css&quot;&gt; &lt;scriptsrc=&quot;//code.jquery.com/jquery-1.9.1.js&quot;&gt;&lt;/script&gt; &lt;scriptsrc=&quot;//code.jquery.com/ui/1.10.4/jquery-ui.js&quot;&gt;&lt;/script&gt; &lt;linkrel=&quot;stylesheet&quot;href=&quot;http://jqueryui.com/resources/demos/style.css&quot;&gt; &lt;style&gt; #project-label{ display:block; font-weight:bold; margin-bottom:1em; } #project-icon{ float:left; height:32px; width:32px; } #project-description{ margin:0; padding:0; } &lt;/style&gt; &lt;script&gt; $(function(){ varprojects=[ { value:&quot;jquery&quot;, label:&quot;jQuery&quot;, desc:&quot;thewriteless,domore,JavaScriptlibrary&quot;, icon:&quot;jquery_32x32.png&quot; }, { value:&quot;jquery-ui&quot;, label:&quot;jQueryUI&quot;, desc:&quot;theofficialuserinterfacelibraryforjQuery&quot;, icon:&quot;jqueryui_32x32.png&quot; }, { value:&quot;sizzlejs&quot;, label:&quot;SizzleJS&quot;, desc:&quot;apure-JavaScriptCSSselectorengine&quot;, icon:&quot;sizzlejs_32x32.png&quot; } ]; $(&quot;#project&quot;).autocomplete({ minLength:0, source:projects, focus:function(event,ui){ $(&quot;#project&quot;).val(ui.item.label); returnfalse; }, select:function(event,ui){ $(&quot;#project&quot;).val(ui.item.label); $(&quot;#project-id&quot;).val(ui.item.value); $(&quot;#project-description&quot;).html(ui.item.desc); $(&quot;#project-icon&quot;).attr(&quot;src&quot;,&quot;images/&quot;+ui.item.icon); returnfalse; } }) .data(&quot;ui-autocomplete&quot;)._renderItem=function(ul,item){ return$(&quot;&lt;li&gt;&quot;) .append(&quot;&lt;a&gt;&quot;+item.label+&quot;&lt;br&gt;&quot;+item.desc+&quot;&lt;/a&gt;&quot;) .appendTo(ul); }; }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;divid=&quot;project-label&quot;&gt;选择一个项目(请键入&quot;j&quot;):&lt;/div&gt; &lt;imgid=&quot;project-icon&quot;src=&quot;images/transparent_1x1.png&quot;alt=&quot;&quot;&gt; &lt;inputid=&quot;project&quot;&gt; &lt;inputtype=&quot;hidden&quot;id=&quot;project-id&quot;&gt; &lt;pid=&quot;project-description&quot;&gt;&lt;/p&gt; &lt;/body&gt; &lt;/html&gt;</pre><p>多个值</p><p>用法:键入一些字符,比如 &quot;j&quot;,可以看到相关的编程语言结果。选择一个值,然后继续键入字符来添加其他的值。</p><p>本实例演示如何使用 source 选项和一些事件来实现在一个单一的文本域输入多个自动完成的值。</p><pre class="brush:html;toolbar:false">&lt;!doctypehtml&gt; &lt;html&gt; &lt;head&gt; &lt;metacharset=&quot;utf-8&quot;&gt; &lt;title&gt;jQueryUI自动完成(Autocomplete)-多个值&lt;/title&gt; &lt;linkrel=&quot;stylesheet&quot;href=&quot;//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css&quot;&gt; &lt;scriptsrc=&quot;//code.jquery.com/jquery-1.9.1.js&quot;&gt;&lt;/script&gt; &lt;scriptsrc=&quot;//code.jquery.com/ui/1.10.4/jquery-ui.js&quot;&gt;&lt;/script&gt; &lt;linkrel=&quot;stylesheet&quot;href=&quot;http://jqueryui.com/resources/demos/style.css&quot;&gt; &lt;script&gt; $(function(){ varavailableTags=[ &quot;ActionScript&quot;, &quot;AppleScript&quot;, &quot;Asp&quot;, &quot;BASIC&quot;, &quot;C&quot;, &quot;C++&quot;, &quot;Clojure&quot;, &quot;COBOL&quot;, &quot;ColdFusion&quot;, &quot;Erlang&quot;, &quot;Fortran&quot;, &quot;Groovy&quot;, &quot;Haskell&quot;, &quot;Java&quot;, &quot;JavaScript&quot;, &quot;Lisp&quot;, &quot;Perl&quot;, &quot;PHP&quot;, &quot;Python&quot;, &quot;Ruby&quot;, &quot;Scala&quot;, &quot;Scheme&quot; ]; functionsplit(val){ returnval.split(/,\s*/); } functionextractLast(term){ returnsplit(term).pop(); } $(&quot;#tags&quot;) //当选择一个条目时不离开文本域 .bind(&quot;keydown&quot;,function(event){ if(event.keyCode===$.ui.keyCode.TAB&amp;&amp; $(this).data(&quot;ui-autocomplete&quot;).menu.active){ event.preventDefault(); } }) .autocomplete({ minLength:0, source:function(request,response){ //回到autocomplete,但是提取最后的条目 response($.ui.autocomplete.filter( availableTags,extractLast(request.term))); }, focus:function(){ //防止在获得焦点时插入值 returnfalse; }, select:function(event,ui){ varterms=split(this.value); //移除当前输入 terms.pop(); //添加被选项 terms.push(ui.item.value); //添加占位符,在结尾添加逗号+空格 terms.push(&quot;&quot;); this.value=terms.join(&quot;,&quot;); returnfalse; } }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div&gt; &lt;labelfor=&quot;tags&quot;&gt;编程语言:&lt;/label&gt; &lt;inputid=&quot;tags&quot;size=&quot;50&quot;&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre><p>多个值,远程</p><p>用法:键入至少两个字符来获取鸟的名称。选择一个值,然后继续键入字符来添加其他的值。</p><p>本实例演示如何使用 source 选项和一些事件来实现在一个单一的文本域输入多个自动完成的值。</p><pre class="brush:html;toolbar:false">&lt;!doctypehtml&gt; &lt;html&gt; &lt;head&gt; &lt;metacharset=&quot;utf-8&quot;&gt; &lt;title&gt;jQueryUI自动完成(Autocomplete)-多个值,远程&lt;/title&gt; &lt;linkrel=&quot;stylesheet&quot;href=&quot;//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css&quot;&gt; &lt;scriptsrc=&quot;//code.jquery.com/jquery-1.9.1.js&quot;&gt;&lt;/script&gt; &lt;scriptsrc=&quot;//code.jquery.com/ui/1.10.4/jquery-ui.js&quot;&gt;&lt;/script&gt; &lt;linkrel=&quot;stylesheet&quot;href=&quot;http://jqueryui.com/resources/demos/style.css&quot;&gt; &lt;style&gt; .ui-autocomplete-loading{ background:whiteurl(&#39;images/ui-anim_basic_16x16.gif&#39;)rightcenterno-repeat; } &lt;/style&gt; &lt;script&gt; $(function(){ functionsplit(val){ returnval.split(/,\s*/); } functionextractLast(term){ returnsplit(term).pop(); } $(&quot;#birds&quot;) //当选择一个条目时不离开文本域 .bind(&quot;keydown&quot;,function(event){ if(event.keyCode===$.ui.keyCode.TAB&amp;&amp; $(this).data(&quot;ui-autocomplete&quot;).menu.active){ event.preventDefault(); } }) .autocomplete({ source:function(request,response){ $.getJSON(&quot;search.php&quot;,{ term:extractLast(request.term) },response); }, search:function(){ //自定义最小长度 varterm=extractLast(this.value); if(term.length&lt;2){ returnfalse; } }, focus:function(){ //防止在获得焦点时插入值 returnfalse; }, select:function(event,ui){ varterms=split(this.value); //移除当前输入 terms.pop(); //添加被选项 terms.push(ui.item.value); //添加占位符,在结尾添加逗号+空格 terms.push(&quot;&quot;); this.value=terms.join(&quot;,&quot;); returnfalse; } }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div&gt; &lt;labelfor=&quot;birds&quot;&gt;鸟:&lt;/label&gt; &lt;inputid=&quot;birds&quot;size=&quot;50&quot;&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre><p>远程 JSONP 数据源</p><p>当您在文本域中键入字符时,Autocomplete 部件给出建议结果。在本实例中,当您在文本域中至少键入两个字符时,将显示相关城市的名称。</p><p>在本实例中,数据源是 geonames.org webservice。虽然选择一个元素后文本域中是该城市名称,但是会显示更多的信息以便找到正确的条目。数据也可以回调,显示在下面的结果框中。</p><pre class="brush:html;toolbar:false">&lt;!doctypehtml&gt; &lt;html&gt; &lt;head&gt; &lt;metacharset=&quot;utf-8&quot;&gt; &lt;title&gt;jQueryUI自动完成(Autocomplete)-远程JSONP数据源&lt;/title&gt; &lt;linkrel=&quot;stylesheet&quot;href=&quot;//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css&quot;&gt; &lt;scriptsrc=&quot;//code.jquery.com/jquery-1.9.1.js&quot;&gt;&lt;/script&gt; &lt;scriptsrc=&quot;//code.jquery.com/ui/1.10.4/jquery-ui.js&quot;&gt;&lt;/script&gt; &lt;linkrel=&quot;stylesheet&quot;href=&quot;http://jqueryui.com/resources/demos/style.css&quot;&gt; &lt;style&gt; .ui-autocomplete-loading{ background:whiteurl(&#39;images/ui-anim_basic_16x16.gif&#39;)rightcenterno-repeat; } #city{width:25em;} &lt;/style&gt; &lt;script&gt; $(function(){ functionlog(message){ $(&quot;&lt;div&gt;&quot;).text(message).prependTo(&quot;#log&quot;); $(&quot;#log&quot;).scrollTop(0); } $(&quot;#city&quot;).autocomplete({ source:function(request,response){ $.ajax({ url:&quot;http://ws.geonames.org/searchJSON&quot;, dataType:&quot;jsonp&quot;, data:{ featureClass:&quot;P&quot;, style:&quot;full&quot;, maxRows:12, name_startsWith:request.term }, success:function(data){ response($.map(data.geonames,function(item){ return{ label:item.name+(item.adminName1?&quot;,&quot;+item.adminName1:&quot;&quot;)+&quot;,&quot;+item.countryName, value:item.name } })); } }); }, minLength:2, select:function(event,ui){ log(ui.item? &quot;Selected:&quot;+ui.item.label: &quot;Nothingselected,inputwas&quot;+this.value); }, open:function(){ $(this).removeClass(&quot;ui-corner-all&quot;).addClass(&quot;ui-corner-top&quot;); }, close:function(){ $(this).removeClass(&quot;ui-corner-top&quot;).addClass(&quot;ui-corner-all&quot;); } }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div&gt; &lt;labelfor=&quot;city&quot;&gt;您的城市:&lt;/label&gt; &lt;inputid=&quot;city&quot;&gt; Poweredby&lt;ahref=&quot;http://geonames.org&quot;target=&quot;_blank&quot;&gt;geonames.org&lt;/a&gt; &lt;/div&gt; &lt;divstyle=&quot;margin-top:2em;font-family:Arial&quot;&gt; 结果: &lt;divid=&quot;log&quot;style=&quot;height:200px;width:300px;overflow:auto;&quot;&gt;&lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre><p>远程数据源</p><p>当您在文本域中键入字符时,Autocomplete 部件给出建议结果。在本实例中,当您在文本域中至少键入两个字符时,将显示相关鸟的名称。</p><p>在本实例中,数据源是可返回 JSON 数据的服务器端脚本,通过一个简单的 source 选项来指定。另外,minLength 选项设置为 2,避免查询返回太多的结果,select 事件用于显示一些反馈。</p><pre class="brush:html;toolbar:false">&lt;!doctypehtml&gt; &lt;html&gt; &lt;head&gt; &lt;metacharset=&quot;utf-8&quot;&gt; &lt;title&gt;jQueryUI自动完成(Autocomplete)-远程数据源&lt;/title&gt; &lt;linkrel=&quot;stylesheet&quot;href=&quot;//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css&quot;&gt; &lt;scriptsrc=&quot;//code.jquery.com/jquery-1.9.1.js&quot;&gt;&lt;/script&gt; &lt;scriptsrc=&quot;//code.jquery.com/ui/1.10.4/jquery-ui.js&quot;&gt;&lt;/script&gt; &lt;linkrel=&quot;stylesheet&quot;href=&quot;http://jqueryui.com/resources/demos/style.css&quot;&gt; &lt;style&gt; .ui-autocomplete-loading{ background:whiteurl(&#39;images/ui-anim_basic_16x16.gif&#39;)rightcenterno-repeat; } &lt;/style&gt; &lt;script&gt; $(function(){ functionlog(message){ $(&quot;&lt;div&gt;&quot;).text(message).prependTo(&quot;#log&quot;); $(&quot;#log&quot;).scrollTop(0); } $(&quot;#birds&quot;).autocomplete({ source:&quot;search.php&quot;, minLength:2, select:function(event,ui){ log(ui.item? &quot;Selected:&quot;+ui.item.value+&quot;aka&quot;+ui.item.id: &quot;Nothingselected,inputwas&quot;+this.value); } }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div&gt; &lt;labelfor=&quot;birds&quot;&gt;鸟:&lt;/label&gt; &lt;inputid=&quot;birds&quot;&gt; &lt;/div&gt; &lt;divstyle=&quot;margin-top:2em;font-family:Arial&quot;&gt; 结果: &lt;divid=&quot;log&quot;style=&quot;height:200px;width:300px;overflow:auto;&quot;&gt;&lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre><p>远程缓存</p><p>当您在文本域中键入字符时,Autocomplete 部件给出建议结果。在本实例中,当您在文本域中至少键入两个字符时,将显示相关鸟的名称。</p><p>为了提高性能,这里添加了一些本地缓存,其他与远程数据源实例相似。在这里,缓存只保存了一个查询,并可以扩展到缓存多个值,每个条目一个值。</p><pre class="brush:html;toolbar:false">&lt;!doctypehtml&gt; &lt;html&gt; &lt;head&gt; &lt;metacharset=&quot;utf-8&quot;&gt; &lt;title&gt;jQueryUI自动完成(Autocomplete)-远程缓存&lt;/title&gt; &lt;linkrel=&quot;stylesheet&quot;href=&quot;//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css&quot;&gt; &lt;scriptsrc=&quot;//code.jquery.com/jquery-1.9.1.js&quot;&gt;&lt;/script&gt; &lt;scriptsrc=&quot;//code.jquery.com/ui/1.10.4/jquery-ui.js&quot;&gt;&lt;/script&gt; &lt;linkrel=&quot;stylesheet&quot;href=&quot;http://jqueryui.com/resources/demos/style.css&quot;&gt; &lt;style&gt; .ui-autocomplete-loading{ background:whiteurl(&#39;images/ui-anim_basic_16x16.gif&#39;)rightcenterno-repeat; } &lt;/style&gt; &lt;script&gt; $(function(){ varcache={}; $(&quot;#birds&quot;).autocomplete({ minLength:2, source:function(request,response){ varterm=request.term; if(termincache){ response(cache[term]); return; } $.getJSON(&quot;search.php&quot;,request,function(data,status,xhr){ cache[term]=data; response(data); }); } }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div&gt; &lt;labelfor=&quot;birds&quot;&gt;鸟:&lt;/label&gt; &lt;inputid=&quot;birds&quot;&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre><p>可滚动的结果</p><p>当显示一个长列表的选项时,您可以简单地为 autocomplete 菜单设置 max-height 来防止菜单显示太长。尝试键入 &quot;a&quot; 或 &quot;s&quot; 来获得一个可滚动的长列表的结果。</p><pre class="brush:html;toolbar:false">&lt;!doctypehtml&gt; &lt;html&gt; &lt;head&gt; &lt;metacharset=&quot;utf-8&quot;&gt; &lt;title&gt;jQueryUI自动完成(Autocomplete)-可滚动的结果&lt;/title&gt; &lt;linkrel=&quot;stylesheet&quot;href=&quot;//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css&quot;&gt; &lt;scriptsrc=&quot;//code.jquery.com/jquery-1.9.1.js&quot;&gt;&lt;/script&gt; &lt;scriptsrc=&quot;//code.jquery.com/ui/1.10.4/jquery-ui.js&quot;&gt;&lt;/script&gt; &lt;linkrel=&quot;stylesheet&quot;href=&quot;http://jqueryui.com/resources/demos/style.css&quot;&gt; &lt;style&gt; .ui-autocomplete{ max-height:100px; overflow-y:auto; /*防止水平滚动条*/ overflow-x:hidden; } /*IE6不支持max-height *我们使用height代替,但是这会强制菜单总是显示为那个高度 */ *html.ui-autocomplete{ height:100px; } &lt;/style&gt; &lt;script&gt; $(function(){ varavailableTags=[ &quot;ActionScript&quot;, &quot;AppleScript&quot;, &quot;Asp&quot;, &quot;BASIC&quot;, &quot;C&quot;, &quot;C++&quot;, &quot;Clojure&quot;, &quot;COBOL&quot;, &quot;ColdFusion&quot;, &quot;Erlang&quot;, &quot;Fortran&quot;, &quot;Groovy&quot;, &quot;Haskell&quot;, &quot;Java&quot;, &quot;JavaScript&quot;, &quot;Lisp&quot;, &quot;Perl&quot;, &quot;PHP&quot;, &quot;Python&quot;, &quot;Ruby&quot;, &quot;Scala&quot;, &quot;Scheme&quot; ]; $(&quot;#tags&quot;).autocomplete({ source:availableTags }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div&gt; &lt;labelfor=&quot;tags&quot;&gt;标签:&lt;/label&gt; &lt;inputid=&quot;tags&quot;&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre><p>XML 数据</p><p>本实例演示如何获取一些 XML 数据,并使用 jQuery 的方法解析它,然后把它提供给 autocomplete 作为数据源。</p><p>本实例也可作为解析远程 XML 数据源的参考 - 解析在每次 source 回调请求时发生。</p><pre class="brush:html;toolbar:false;">&lt;!doctypehtml&gt; &lt;html&gt; &lt;head&gt; &lt;metacharset=&quot;utf-8&quot;&gt; &lt;title&gt;jQueryUI自动完成(Autocomplete)-XML数据&lt;/title&gt; &lt;linkrel=&quot;stylesheet&quot;href=&quot;//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css&quot;&gt; &lt;scriptsrc=&quot;//code.jquery.com/jquery-1.9.1.js&quot;&gt;&lt;/script&gt; &lt;scriptsrc=&quot;//code.jquery.com/ui/1.10.4/jquery-ui.js&quot;&gt;&lt;/script&gt; &lt;linkrel=&quot;stylesheet&quot;href=&quot;http://jqueryui.com/resources/demos/style.css&quot;&gt; &lt;style&gt; .ui-autocomplete-loading{background:whiteurl(&#39;images/ui-anim_basic_16x16.gif&#39;)rightcenterno-repeat;} &lt;/style&gt; &lt;script&gt; $(function(){ functionlog(message){ $(&quot;&lt;div/&gt;&quot;).text(message).prependTo(&quot;#log&quot;); $(&quot;#log&quot;).attr(&quot;scrollTop&quot;,0); } $.ajax({ url:&quot;london.xml&quot;, dataType:&quot;xml&quot;, success:function(xmlResponse){ vardata=$(&quot;geoname&quot;,xmlResponse).map(function(){ return{ value:$(&quot;name&quot;,this).text()+&quot;,&quot;+ ($.trim($(&quot;countryName&quot;,this).text())||&quot;(unknowncountry)&quot;), id:$(&quot;geonameId&quot;,this).text() }; }).get(); $(&quot;#birds&quot;).autocomplete({ source:data, minLength:0, select:function(event,ui){ log(ui.item? &quot;Selected:&quot;+ui.item.value+&quot;,geonameId:&quot;+ui.item.id: &quot;Nothingselected,inputwas&quot;+this.value); } }); } }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div&gt; &lt;labelfor=&quot;birds&quot;&gt;London匹配:&lt;/label&gt; &lt;inputid=&quot;birds&quot;&gt; &lt;/div&gt; &lt;divstyle=&quot;margin-top:2em;font-family:Arial&quot;&gt; 结果: &lt;divid=&quot;log&quot;style=&quot;height:200px;width:300px;overflow:auto;&quot;&gt;&lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre>
RangeTime:0.009317s
RangeMem:235.61 KB
返回顶部 留言