默認功能
當您在輸入域中輸入時，自動完成（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 文章。
<!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。雖然選擇一個元素后文本域中是該城市名稱，但是會顯示更多的信息以便找到正確的條目。數據也可以回調，顯示在下面的結果框中。
<!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
>