jQuery UI 實例 - 自動完成（Autocomplete） · W3School jQuery UI 教程

# jQuery UI 實例 - 自動完成（Autocomplete）根據用戶輸入值進行搜索和過濾，讓用戶快速找到并從預設值列表中選擇。如需了解更多有關 autocomplete 部件的細節，請查看 API 文檔 [自動完成部件（Autocomplete Widget）](api-autocomplete.html)。 ## 默認功能當您在輸入域中輸入時，自動完成（Autocomplete）部件提供相應的建議。在本實例中，提供了編程語言的建議選項，您可以輸入 "ja" 嘗試一下，可以得到 Java 或 JavaScript。數據源是一個簡單的 JavaScript 數組，使用 source 選項提供給部件。 ``` <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 自動完成（Autocomplete） - 默認功能</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <script> $(function() { var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ]; $( "#tags" ).autocomplete({ source: availableTags }); }); </script> </head> <body> <div class="ui-widget"> <label for="tags">標簽：</label> <input id="tags"> </div> </body> </html> ``` ## 包含重音 autocomplete 域使用自定義的 source 選項來匹配帶有重音字符的結果項，即使文本域不包含重音字符也會匹配。但是如果您在文本域中鍵入了重音字符，則不會顯示非重音的結果項。嘗試鍵入 "Jo"，會看到 "John" 和 "J?rn"，然后鍵入 "J?"，只會看到 "J?rn"。 ``` <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 自動完成（Autocomplete） - 包含重音</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <script> $(function() { var names = [ "J?rn Zaefferer", "Scott González", "John Resig" ]; var accentMap = { "á": "a", "?": "o" }; var normalize = function( term ) { var ret = ""; for ( var i = 0; i < term.length; i++ ) { ret += accentMap[ term.charAt(i) ] || term.charAt(i); } return ret; }; $( "#developer" ).autocomplete({ source: function( request, response ) { var matcher = new RegExp( $.ui.autocomplete.escapeRegex( request.term ), "i" ); response( $.grep( names, function( value ) { value = value.label || value.value || value; return matcher.test( value ) || matcher.test( normalize( value ) ); }) ); } }); }); </script> </head> <body> <div class="ui-widget"> <form> <label for="developer">開發人員：</label> <input id="developer"> </form> </div> </body> </html> ``` ## 分類分類的搜索結果。嘗試鍵入 "a" 或 "n"。 ``` <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 自動完成（Autocomplete） - 分類</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <style> .ui-autocomplete-category { font-weight: bold; padding: .2em .4em; margin: .8em 0 .2em; line-height: 1.5; } </style> <script> $.widget( "custom.catcomplete", $.ui.autocomplete, { _renderMenu: function( ul, items ) { var that = this, currentCategory = ""; $.each( items, function( index, item ) { if ( item.category != currentCategory ) { ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" ); currentCategory = item.category; } that._renderItemData( ul, item ); }); } }); </script> <script> $(function() { var data = [ { label: "anders", category: "" }, { label: "andreas", category: "" }, { label: "antal", category: "" }, { label: "annhhx10", category: "Products" }, { label: "annk K12", category: "Products" }, { label: "annttop C13", category: "Products" }, { label: "anders andersson", category: "People" }, { label: "andreas andersson", category: "People" }, { label: "andreas johnson", category: "People" } ]; $( "#search" ).catcomplete({ delay: 0, source: data }); }); </script> </head> <body> <label for="search">搜索：</label> <input id="search"> </body> </html> ``` ## 組合框（Combobox）一個由 Autocomplete 和 Button 創建的自定義部件。您可以鍵入一些字符，來獲得基于您的輸入過濾的結果，或者使用按鈕從完整列表中選擇。該輸入是從一個已有的 select 元素中讀取，傳遞給帶有自定義的 source 選項的 Autocomplete。這是一個不被支持的不完美的部件。這里純粹是為了演示 autocomplete 定制功能。[如需了解更多有關該部件工作原理的細節，請點擊這里查看相關的 jQuery 文章。](//www.learningjquery.com/2010/06/a-jquery-ui-combobox-under-the-hood/) ``` <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 自動完成（Autocomplete） - 組合框（Combobox）</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <style> .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; } </style> <script> (function( $ ) { $.widget( "custom.combobox", { _create: function() { this.wrapper = $( "<span>" ) .addClass( "custom-combobox" ) .insertAfter( this.element ); this.element.hide(); this._createAutocomplete(); this._createShowAllButton(); }, _createAutocomplete: function() { var selected = this.element.children( ":selected" ), value = selected.val() ? selected.text() : ""; this.input = $( "<input>" ) .appendTo( this.wrapper ) .val( value ) .attr( "title", "" ) .addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" ) .autocomplete({ delay: 0, minLength: 0, source: $.proxy( this, "_source" ) }) .tooltip({ tooltipClass: "ui-state-highlight" }); this._on( this.input, { autocompleteselect: function( event, ui ) { ui.item.option.selected = true; this._trigger( "select", event, { item: ui.item.option }); }, autocompletechange: "_removeIfInvalid" }); }, _createShowAllButton: function() { var input = this.input, wasOpen = false; $( "<a>" ) .attr( "tabIndex", -1 ) .attr( "title", "Show All Items" ) .tooltip() .appendTo( this.wrapper ) .button({ icons: { primary: "ui-icon-triangle-1-s" }, text: false }) .removeClass( "ui-corner-all" ) .addClass( "custom-combobox-toggle ui-corner-right" ) .mousedown(function() { wasOpen = input.autocomplete( "widget" ).is( ":visible" ); }) .click(function() { input.focus(); // 如果已經可見則關閉 if ( wasOpen ) { return; } // 傳遞空字符串作為搜索的值，顯示所有的結果 input.autocomplete( "search", "" ); }); }, _source: function( request, response ) { var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" ); response( this.element.children( "option" ).map(function() { var text = $( this ).text(); if ( this.value && ( !request.term || matcher.test(text) ) ) return { label: text, value: text, option: this }; }) ); }, _removeIfInvalid: function( event, ui ) { // 選擇一項，不執行其他動作 if ( ui.item ) { return; } // 搜索一個匹配（不區分大小寫） var value = this.input.val(), valueLowerCase = value.toLowerCase(), valid = false; this.element.children( "option" ).each(function() { if ( $( this ).text().toLowerCase() === valueLowerCase ) { this.selected = valid = true; return false; } }); // 找到一個匹配，不執行其他動作 if ( valid ) { return; } // 移除無效的值 this.input .val( "" ) .attr( "title", value + " didn't match any item" ) .tooltip( "open" ); this.element.val( "" ); this._delay(function() { this.input.tooltip( "close" ).attr( "title", "" ); }, 2500 ); this.input.data( "ui-autocomplete" ).term = ""; }, _destroy: function() { this.wrapper.remove(); this.element.show(); } }); })( jQuery ); $(function() { $( "#combobox" ).combobox(); $( "#toggle" ).click(function() { $( "#combobox" ).toggle(); }); }); </script> </head> <body> <div class="ui-widget"> <label>您喜歡的編程語言：</label> <select id="combobox"> <option value="">請選擇...</option> <option value="ActionScript">ActionScript</option> <option value="AppleScript">AppleScript</option> <option value="Asp">Asp</option> <option value="BASIC">BASIC</option> <option value="C">C</option> <option value="C++">C++</option> <option value="Clojure">Clojure</option> <option value="COBOL">COBOL</option> <option value="ColdFusion">ColdFusion</option> <option value="Erlang">Erlang</option> <option value="Fortran">Fortran</option> <option value="Groovy">Groovy</option> <option value="Haskell">Haskell</option> <option value="Java">Java</option> <option value="JavaScript">JavaScript</option> <option value="Lisp">Lisp</option> <option value="Perl">Perl</option> <option value="PHP">PHP</option> <option value="Python">Python</option> <option value="Ruby">Ruby</option> <option value="Scala">Scala</option> <option value="Scheme">Scheme</option> </select> </div> <button id="toggle">顯示基礎的選擇框</button> </body> </html> ``` ## 自定義數據并顯示您可以使用自定義數據格式，并通過簡單地重載默認的聚焦和選擇行為來顯示數據。嘗試鍵入 "j"，或者按向下箭頭按鍵，即可得到一個項目列表。 ``` <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 自動完成（Autocomplete） - 自定義數據并顯示</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <style> #project-label { display: block; font-weight: bold; margin-bottom: 1em; } #project-icon { float: left; height: 32px; width: 32px; } #project-description { margin: 0; padding: 0; } </style> <script> $(function() { var projects = [ { value: "jquery", label: "jQuery", desc: "the write less, do more, JavaScript library", icon: "jquery_32x32.png" }, { value: "jquery-ui", label: "jQuery UI", desc: "the official user interface library for jQuery", icon: "jqueryui_32x32.png" }, { value: "sizzlejs", label: "Sizzle JS", desc: "a pure-JavaScript CSS selector engine", icon: "sizzlejs_32x32.png" } ]; $( "#project" ).autocomplete({ minLength: 0, source: projects, focus: function( event, ui ) { $( "#project" ).val( ui.item.label ); return false; }, select: function( event, ui ) { $( "#project" ).val( ui.item.label ); $( "#project-id" ).val( ui.item.value ); $( "#project-description" ).html( ui.item.desc ); $( "#project-icon" ).attr( "src", "images/" + ui.item.icon ); return false; } }) .data( "ui-autocomplete" )._renderItem = function( ul, item ) { return $( "<li>" ) .append( "<a>" + item.label + "<br>" + item.desc + "</a>" ) .appendTo( ul ); }; }); </script> </head> <body> <div id="project-label">選擇一個項目（請鍵入 "j"）：</div> <img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default" alt=""> <input id="project"> <input type="hidden" id="project-id"> <p id="project-description"></p> </body> </html> ``` ## 多個值用法：鍵入一些字符，比如 "j"，可以看到相關的編程語言結果。選擇一個值，然后繼續鍵入字符來添加其他的值。本實例演示如何使用 source 選項和一些事件來實現在一個單一的文本域輸入多個自動完成的值。 ``` <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 自動完成（Autocomplete） - 多個值</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <script> $(function() { var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ]; function split( val ) { return val.split( /,\s*/ ); } function extractLast( term ) { return split( term ).pop(); } $( "#tags" ) // 當選擇一個條目時不離開文本域 .bind( "keydown", function( event ) { if ( event.keyCode === $.ui.keyCode.TAB && $( this ).data( "ui-autocomplete" ).menu.active ) { event.preventDefault(); } }) .autocomplete({ minLength: 0, source: function( request, response ) { // 回到 autocomplete，但是提取最后的條目 response( $.ui.autocomplete.filter( availableTags, extractLast( request.term ) ) ); }, focus: function() { // 防止在獲得焦點時插入值 return false; }, select: function( event, ui ) { var terms = split( this.value ); // 移除當前輸入 terms.pop(); // 添加被選項 terms.push( ui.item.value ); // 添加占位符，在結尾添加逗號+空格 terms.push( "" ); this.value = terms.join( ", " ); return false; } }); }); </script> </head> <body> <div class="ui-widget"> <label for="tags">編程語言：</label> <input id="tags" size="50"> </div> </body> </html> ``` ## 多個值，遠程用法：鍵入至少兩個字符來獲取鳥的名稱。選擇一個值，然后繼續鍵入字符來添加其他的值。本實例演示如何使用 source 選項和一些事件來實現在一個單一的文本域輸入多個自動完成的值。 ``` <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 自動完成（Autocomplete） - 多個值，遠程</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <style> .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; } </style> <script> $(function() { function split( val ) { return val.split( /,\s*/ ); } function extractLast( term ) { return split( term ).pop(); } $( "#birds" ) // 當選擇一個條目時不離開文本域 .bind( "keydown", function( event ) { if ( event.keyCode === $.ui.keyCode.TAB && $( this ).data( "ui-autocomplete" ).menu.active ) { event.preventDefault(); } }) .autocomplete({ source: function( request, response ) { $.getJSON( "search.php", { term: extractLast( request.term ) }, response ); }, search: function() { // 自定義最小長度 var term = extractLast( this.value ); if ( term.length < 2 ) { return false; } }, focus: function() { // 防止在獲得焦點時插入值 return false; }, select: function( event, ui ) { var terms = split( this.value ); // 移除當前輸入 terms.pop(); // 添加被選項 terms.push( ui.item.value ); // 添加占位符，在結尾添加逗號+空格 terms.push( "" ); this.value = terms.join( ", " ); return false; } }); }); </script> </head> <body> <div class="ui-widget"> <label for="birds">鳥：</label> <input id="birds" size="50"> </div> </body> </html> ``` ## 遠程 JSONP 數據源當您在文本域中鍵入字符時，Autocomplete 部件給出建議結果。在本實例中，當您在文本域中至少鍵入兩個字符時，將顯示相關城市的名稱。在本實例中，數據源是 [geonames.org webservice](//geonames.org/)。雖然選擇一個元素后文本域中是該城市名稱，但是會顯示更多的信息以便找到正確的條目。數據也可以回調，顯示在下面的結果框中。 ``` <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 自動完成（Autocomplete） - 遠程 JSONP 數據源</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <style> .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; } #city { width: 25em; } </style> <script> $(function() { function log( message ) { $( "<div>" ).text( message ).prependTo( "#log" ); $( "#log" ).scrollTop( 0 ); } $( "#city" ).autocomplete({ source: function( request, response ) { $.ajax({ url: "http://ws.geonames.org/searchJSON", dataType: "jsonp", data: { featureClass: "P", style: "full", maxRows: 12, name_startsWith: request.term }, success: function( data ) { response( $.map( data.geonames, function( item ) { return { label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName, value: item.name } })); } }); }, minLength: 2, select: function( event, ui ) { log( ui.item ? "Selected: " + ui.item.label : "Nothing selected, input was " + this.value); }, open: function() { $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" ); }, close: function() { $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" ); } }); }); </script> </head> <body> <div class="ui-widget"> <label for="city">您的城市：</label> <input id="city"> Powered by <a href="http://geonames.org" target="_blank">geonames.org</a> </div> <div class="ui-widget" style="margin-top:2em; font-family:Arial"> 結果： <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div> </div> </body> </html> ``` ## 遠程數據源當您在文本域中鍵入字符時，Autocomplete 部件給出建議結果。在本實例中，當您在文本域中至少鍵入兩個字符時，將顯示相關鳥的名稱。在本實例中，數據源是可返回 JSON 數據的服務器端腳本，通過一個簡單的 source 選項來指定。另外，minLength 選項設置為 2，避免查詢返回太多的結果，select 事件用于顯示一些反饋。 ``` <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 自動完成（Autocomplete） - 遠程數據源</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <style> .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; } </style> <script> $(function() { function log( message ) { $( "<div>" ).text( message ).prependTo( "#log" ); $( "#log" ).scrollTop( 0 ); } $( "#birds" ).autocomplete({ source: "search.php", minLength: 2, select: function( event, ui ) { log( ui.item ? "Selected: " + ui.item.value + " aka " + ui.item.id : "Nothing selected, input was " + this.value ); } }); }); </script> </head> <body> <div class="ui-widget"> <label for="birds">鳥：</label> <input id="birds"> </div> <div class="ui-widget" style="margin-top:2em; font-family:Arial"> 結果： <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div> </div> </body> </html> ``` ## 遠程緩存當您在文本域中鍵入字符時，Autocomplete 部件給出建議結果。在本實例中，當您在文本域中至少鍵入兩個字符時，將顯示相關鳥的名稱。為了提高性能，這里添加了一些本地緩存，其他與遠程數據源實例相似。在這里，緩存只保存了一個查詢，并可以擴展到緩存多個值，每個條目一個值。 ``` <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 自動完成（Autocomplete） - 遠程緩存</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <style> .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; } </style> <script> $(function() { var cache = {}; $( "#birds" ).autocomplete({ minLength: 2, source: function( request, response ) { var term = request.term; if ( term in cache ) { response( cache[ term ] ); return; } $.getJSON( "search.php", request, function( data, status, xhr ) { cache[ term ] = data; response( data ); }); } }); }); </script> </head> <body> <div class="ui-widget"> <label for="birds">鳥：</label> <input id="birds"> </div> </body> </html> ``` ## 可滾動的結果當顯示一個長列表的選項時，您可以簡單地為 autocomplete 菜單設置 max-height 來防止菜單顯示太長。嘗試鍵入 "a" 或 "s" 來獲得一個可滾動的長列表的結果。 ``` <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 自動完成（Autocomplete） - 可滾動的結果</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <style> .ui-autocomplete { max-height: 100px; overflow-y: auto; /* 防止水平滾動條 */ overflow-x: hidden; } /* IE 6 不支持 max-height * 我們使用 height 代替，但是這會強制菜單總是顯示為那個高度 */ * html .ui-autocomplete { height: 100px; } </style> <script> $(function() { var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ]; $( "#tags" ).autocomplete({ source: availableTags }); }); </script> </head> <body> <div class="ui-widget"> <label for="tags">標簽：</label> <input id="tags"> </div> </body> </html> ``` ## XML 數據本實例演示如何獲取一些 XML 數據，并使用 jQuery 的方法解析它，然后把它提供給 autocomplete 作為數據源。本實例也可作為解析遠程 XML 數據源的參考 - 解析在每次 source 回調請求時發生。 ``` <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 自動完成（Autocomplete） - XML 數據</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <style> .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; } </style> <script> $(function() { function log( message ) { $( "<div/>" ).text( message ).prependTo( "#log" ); $( "#log" ).attr( "scrollTop", 0 ); } $.ajax({ url: "london.xml", dataType: "xml", success: function( xmlResponse ) { var data = $( "geoname", xmlResponse ).map(function() { return { value: $( "name", this ).text() + ", " + ( $.trim( $( "countryName", this ).text() ) || "(unknown country)" ), id: $( "geonameId", this ).text() }; }).get(); $( "#birds" ).autocomplete({ source: data, minLength: 0, select: function( event, ui ) { log( ui.item ? "Selected: " + ui.item.value + ", geonameId: " + ui.item.id : "Nothing selected, input was " + this.value ); } }); } }); }); </script> </head> <body> <div class="ui-widget"> <label for="birds">London 匹配：</label> <input id="birds"> </div> <div class="ui-widget" style="margin-top:2em; font-family:Arial"> 結果： <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div> </div> </body> </html> ```