autocomplete的select选项怎么用，官方没有说明？
autocomplete的select选项怎么用，官方没有说明？
昵称: liujianliang &时间:
昵称: qianzai5765638 &时间:
昵称: liujianliang &时间:
昵称: qianzai5765638 &时间:
你不信么，那我发给你看http://jqueryui.com/demos/autocomplete/#remote在options哪一项是没有select这个参数说明的
昵称: liujianliang &时间:
昵称: liujianliang &时间:
昵称: qianzai5765638 &时间:
官方有说明的呀Triggered when an item is se ui.item refers to the selected item. The default action of select is to replace the text field's value with the value of the selected item. Canceling this event prevents the value from being updated, but does not prevent the menu from closing.Code examplesSupply a callback function to handle the select event as an init option.& $( &.selector& ).autocomplete({ &
select: function(event, ui) { ... }});Bind to the select event by type: autocompleteselect.& $( &.selector& ).bind( &autocompleteselect&, function(event, ui) { & ...});
昵称: lsw &时间:温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
2.inputclass （默认值： “ ac_input ” ）&这个阶层将被添加到输入框。resultsclass （默认值： “ ac_results ” ）&阶级为UL认证将包含结果项目（项目的结果是李元素） 。loadingclass = （默认值： “ ac_loading ” ）&阶级为输入框，而结果正在牵强，从服务器。lineseparator = （默认值： “ \ n ” ）&字符分隔线，结果从后端。cellseparator （默认值： “ | ” ）&字符分隔细胞的结果，从后端。minchars （默认值： 1 ）&最低的字符数用户输入之前， autocompleter激活。拖延（默认值： 400 ）&延迟在毫秒该autocompleter等待后，一按键来激活本身。如果您使用的数据财产设立一个本地数组，您可能希望增加延迟，以在较短的时限内（如40ms ） 。cachelength （默认值： 1 ）&人数后端的查询结果，存储在缓存中。如果设置为1 （目前的结果） ，不缓存会发生。不设低于1 。matchsubset （默认值： 1 ）&是否或不是autocompleter可以使用一个缓存为更具体的疑问。这意味着所有匹配的“脚”是的一个子集所有匹配的“富” 。通常这是事实，和使用这个选项跌幅服务器负载，并提高性能。记得设置cachelength ，以更大的数目，如10 。matchcase （默认值： 0 ）&是否或不比较是区分大小写的。唯一重要的唯一如果您使用的缓存。matchcontains = options.matchcontains | | 0 ;&是否或不是比较看来，内（即是否“广管局”匹配“富网吧” ）的搜索结果。唯一重要如果您使用的缓存。maxitemstoshow （默认值： -1 ）&限制的结果数量将显示在下拉。这是非常有用的如果您有大量的数据和不想为用户提供一份清单，列出可能包含数以百计的项目。要禁用此功能，将该值设置为-1 。mustmatch （默认值： 0 ）&如果设置为1 （ True ） ， autocompleter将只允许结果是由后端。请注意，非法价值观的结果，在一个空的输入框。在为例，在本月初的文件，打字“页脚” ，会导致一个空的输入框。extraparams （默认值： （ ） ）&额外的参数为后端。如果你要指定（酒吧： 4 ） ， autocompleter将要求my_autocomplete_backend.php问=富酒吧= 4 （假设输入框包含“富” ） 。宽度（默认值： 0 ）&宽度设为下拉层。如果一个非正整数是指定的，那么宽度的方块，将取决于宽度的投入要素。一般来说，您会想要离开这个价值。然而，在某些情况下，您可能有一个小的投入要素如下拉层的需要，显示了很多的选择。在这种情况下，您可以指定一个较大的规模。selectfirst （默认值：虚假）&如果是这样的设置为True ，第一次自动完成的价值将被自动选定的标签/回报率，即使没有亲自通过键盘或鼠标的行动。如果有一个亲自（突出） ，结果，这一结果将优先考虑。selectonly （默认值：虚假）&如果是这样的设置为TRUE ，和只存在一个自动当用户点击标签/返回，这将是选定的，即使它并未亲自通过键盘或鼠标的行动。这是压倒selectfirst 。formatitem （默认值：无）&一个JavaScript函数，可以提供先进的标记为一个项目。每一行的结果，此功能将被称为。返回的值将被车厢内所展示的李元素在结果列表中。 autocompleter将提供3个参数：结果连续的立场，列在名单的结果，以及有多少个项目，在结果列表。见的源代码http://www.dyve.net/jquery?autocomplete一个例子。onselectitem （默认值：无）&JavaScript函数将被称为当一个项目被选中。该autocompleter将指定一个单一的说法，作为李元素被选中。李元素，这将有属性的“额外”包含一个数组的所有细胞，后端指定。见的源代码http://www.dyve.net/jquery?autocomplete一个例子。onfindvalue （默认值：无）&JavaScript函数将被称为当findvalue （ ）方法是所谓的。该函数会予以通过，专责李元素-就像o nselectitem功能。如果您想要做更多与您的autocompleter ，你可以改变一些方案对飞。&该autocompleter访问作为一个属性，输入框。例如：&/ /设置autocompleter&无功交流= $ （ “ ＃ input_box ” ） 。自动（ “ my_autocomplete_backend.php ” ） ;&/ /会看的价值，自动框的基础上，在文字输入的元素交流[ 0 ] 。 autocompleter.findvalue （ ） ;有下列功能，可被称为影响的行为，在运行时间：findvalue （ ）&这将研究的价值，目前在投入要素并期待它的价值，看看是否能找到一个匹配的价值。这个功能可以潜在的执行AJAX操作，因此， findvalue （ ）函数没有返回值。相反，你需要具体的一onfindvalue回调函数将运行。这种方法是有价值的，如果您需要设置自动投入要素的价值通过JavaScript和“价值”的文本字段映射到扩展属性存储在李元素的“额外”的财产。flushcache （ ）&这刷新缓存。setextraparams （目标）&这集的额外参数的autocompleter ，以目标（即应该是一个JavaScript对象，见上文） 。它的往往是明智的刷新缓存后，要求setextraparameters 。
阅读(497)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
在LOFTER的更多文章
loftPermalink:'',
id:'fks_',
blogTitle:'JQUERY AUTOCOMPLETE 的翻译',
blogAbstract:'这是一个自己做的翻译的文章,无奈,Engilish不怎么好,可能到后面连自己也看不懂也说不定.使用方法:$(\"selector\").autocomplete(url [, options]);$(\"selector\").autocompleteArray(
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}jQuery UI 教程
jQuery UI 实例 - 自动完成（Autocomplete）
根据用户输入值进行搜索和过滤，让用户快速找到并从预设值列表中选择。
如需了解更多有关 autocomplete 部件的细节，请查看 API 文档 。
本章节使用到 。
当您在输入域中输入时，自动完成（Autocomplete）部件提供相应的建议。在本实例中，提供了编程语言的建议选项，您可以输入 "ja" 尝试一下，可以得到 Java 或 JavaScript。
数据源是一个简单的 JavaScript 数组，使用 source 选项提供给部件。
&!doctype html&
&html lang="en"&
&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"&
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Clojure",
"ColdFusion",
"Fortran",
"Haskell",
"JavaScript",
$( "#tags" ).autocomplete({
source: availableTags
&div class="ui-widget"&
&label for="tags"&标签：&/label&
&input id="tags"&
autocomplete 域使用自定义的 source 选项来匹配带有重音字符的结果项，即使文本域不包含重音字符也会匹配。但是如果您在文本域中键入了重音字符，则不会显示非重音的结果项。
尝试键入 "Jo"，会看到 "John" 和 "J?rn"，然后 键入 "J?"，只会看到 "J?rn"。
&!doctype html&
&html lang="en"&
&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"&
$(function() {
var names = [ "J&rn Zaefferer", "Scott Gonz&lez", "John Resig" ];
var accentMap = {
var normalize = function( term ) {
var ret = "";
for ( var i = 0; i & term. i++ ) {
ret += accentMap[ term.charAt(i) ] || term.charAt(i);
$( "#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 ||
return matcher.test( value ) || matcher.test( normalize( value ) );
&div class="ui-widget"&
&label for="developer"&开发人员：&/label&
&input id="developer"&
分类的搜索结果。尝试键入 "a" 或 "n"。
&!doctype html&
&html lang="en"&
&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"&
.ui-autocomplete-category {
font-weight:
padding: .2em .4
margin: .8em 0 .2
line-height: 1.5;
$.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.
that._renderItemData( ul, item );
$(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({
source: data
&label for="search"&搜索：&/label&
&input id="search"&
组合框（Combobox）
一个由 Autocomplete 和 Button 创建的自定义部件。您可以键入一些字符，来获得基于您的输入过滤的结果，或者使用按钮从完整列表中选择。
该输入是从一个已有的 select 元素中读取，传递给带有自定义的 source 选项的 Autocomplete。
这是一个不被支持的不完美的部件。这里纯粹是为了演示 autocomplete 定制功能。
&!doctype html&
&html lang="en"&
&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"&
.custom-combobox {
display: inline-
.custom-combobox-toggle {
bottom: 0;
margin-left: -1
padding: 0;
/* 支持： IE7 */
*height: 1.7
.custom-combobox-input {
margin: 0;
padding: 0.3
(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({
minLength: 0,
source: $.proxy( this, "_source" )
.tooltip({
tooltipClass: "ui-state-highlight"
this._on( this.input, {
autocompleteselect: function( event, ui ) {
ui.item.option.selected =
this._trigger( "select", event, {
item: ui.item.option
autocompletechange: "_removeIfInvalid"
_createShowAllButton: function() {
var input = this.input,
$( "&a&" )
.attr( "tabIndex", -1 )
.attr( "title", "Show All Items" )
.tooltip()
.appendTo( this.wrapper )
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 ) {
// 传递空字符串作为搜索的值，显示所有的结果
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) ) )
label: text,
value: text,
option: this
_removeIfInvalid: function( event, ui ) {
// 选择一项，不执行其他动作
if ( ui.item ) {
// 搜索一个匹配（不区分大小写）
var value = this.input.val(),
valueLowerCase = value.toLowerCase(),
this.element.children( "option" ).each(function() {
if ( $( this ).text().toLowerCase() === valueLowerCase ) {
this.selected = valid =
// 找到一个匹配，不执行其他动作
if ( valid ) {
// 移除无效的值
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();
&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&
&button id="toggle"&显示基础的选择框&/button&
自定义数据并显示
您可以使用自定义数据格式，并通过简单地重载默认的聚焦和选择行为来显示数据。
尝试键入 "j"，或者按向下箭头按键，即可得到一个项目列表。
&!doctype html&
&html lang="en"&
&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"&
#project-label {
font-weight:
margin-bottom: 1
#project-icon {
height: 32
#project-description {
margin: 0;
padding: 0;
$(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 );
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 );
.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
return $( "&li&" )
.append( "&a&" + item.label + "&br&" + item.desc + "&/a&" )
.appendTo( ul );
&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&
用法：键入一些字符，比如 "j"，可以看到相关的编程语言结果。选择一个值，然后继续键入字符来添加其他的值。
本实例演示如何使用 source 选项和一些事件来实现在一个单一的文本域输入多个自动完成的值。
&!doctype html&
&html lang="en"&
&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"&
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Clojure",
"ColdFusion",
"Fortran",
"Haskell",
"JavaScript",
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() {
// 防止在获得焦点时插入值
select: function( event, ui ) {
var terms = split( this.value );
// 移除当前输入
terms.pop();
// 添加被选项
terms.push( ui.item.value );
// 添加占位符，在结尾添加逗号+空格
terms.push( "" );
this.value = terms.join( ", " );
&div class="ui-widget"&
&label for="tags"&编程语言：&/label&
&input id="tags" size="50"&
多个值，远程
用法：键入至少两个字符来获取鸟的名称。选择一个值，然后继续键入字符来添加其他的值。
本实例演示如何使用 source 选项和一些事件来实现在一个单一的文本域输入多个自动完成的值。
&!doctype html&
&html lang="en"&
&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"&
.ui-autocomplete-loading {
background: white url('images/ui-anim_basic_16x16.gif') right center no-
$(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 ) {
focus: function() {
// 防止在获得焦点时插入值
select: function( event, ui ) {
var terms = split( this.value );
// 移除当前输入
terms.pop();
// 添加被选项
terms.push( ui.item.value );
// 添加占位符，在结尾添加逗号+空格
terms.push( "" );
this.value = terms.join( ", " );
&div class="ui-widget"&
&label for="birds"&鸟：&/label&
&input id="birds" size="50"&
远程 JSONP 数据源
当您在文本域中键入字符时，Autocomplete 部件给出建议结果。在本实例中，当您在文本域中至少键入两个字符时，将显示相关城市的名称。
在本实例中，数据源是 。虽然选择一个元素后文本域中是该城市名称，但是会显示更多的信息以便找到正确的条目。数据也可以回调，显示在下面的结果框中。
&!doctype html&
&html lang="en"&
&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"&
.ui-autocomplete-loading {
background: white url('images/ui-anim_basic_16x16.gif') right center no-
#city { width: 25 }
$(function() {
function log( message ) {
$( "&div&" ).text( message ).prependTo( "#log" );
$( "#log" ).scrollTop( 0 );
$( "#city" ).autocomplete({
source: function( request, response ) {
url: "http://ws.geonames.org/searchJSON",
dataType: "jsonp",
featureClass: "P",
style: "full",
maxRows: 12,
name_startsWith: request.term
success: function( data ) {
response( $.map( data.geonames, function( item ) {
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" );
&div class="ui-widget"&
&label for="city"&您的城市：&/label&
&input id="city"&
Powered by &a href="http://geonames.org" target="_blank"&geonames.org&/a&
&div class="ui-widget" style="margin-top:2 font-family:Arial"&
&div id="log" style="height: 200 width: 300 overflow:" class="ui-widget-content"&&/div&
远程数据源
当您在文本域中键入字符时，Autocomplete 部件给出建议结果。在本实例中，当您在文本域中至少键入两个字符时，将显示相关鸟的名称。
在本实例中，数据源是可返回 JSON 数据的服务器端脚本，通过一个简单的 source 选项来指定。另外，minLength 选项设置为 2，避免查询返回太多的结果，select 事件用于显示一些反馈。
&!doctype html&
&html lang="en"&
&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"&
.ui-autocomplete-loading {
background: white url('images/ui-anim_basic_16x16.gif') right center no-
$(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 );
&div class="ui-widget"&
&label for="birds"&鸟：&/label&
&input id="birds"&
&div class="ui-widget" style="margin-top:2 font-family:Arial"&
&div id="log" style="height: 200 width: 300 overflow:" class="ui-widget-content"&&/div&
当您在文本域中键入字符时，Autocomplete 部件给出建议结果。在本实例中，当您在文本域中至少键入两个字符时，将显示相关鸟的名称。
为了提高性能，这里添加了一些本地缓存，其他与远程数据源实例相似。在这里，缓存只保存了一个查询，并可以扩展到缓存多个值，每个条目一个值。
&!doctype html&
&html lang="en"&
&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"&
.ui-autocomplete-loading {
background: white url('images/ui-anim_basic_16x16.gif') right center no-
$(function() {
var cache = {};
$( "#birds" ).autocomplete({
minLength: 2,
source: function( request, response ) {
var term = request.
if ( term in cache ) {
response( cache[ term ] );
$.getJSON( "search.php", request, function( data, status, xhr ) {
cache[ term ] =
response( data );
&div class="ui-widget"&
&label for="birds"&鸟：&/label&
&input id="birds"&
可滚动的结果
当显示一个长列表的选项时，您可以简单地为 autocomplete 菜单设置 max-height 来防止菜单显示太长。尝试键入 "a" 或 "s" 来获得一个可滚动的长列表的结果。
&!doctype html&
&html lang="en"&
&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"&
.ui-autocomplete {
max-height: 100
overflow-y:
/* 防止水平滚动条 */
overflow-x:
/* IE 6 不支持 max-height
* 我们使用 height 代替，但是这会强制菜单总是显示为那个高度
* html .ui-autocomplete {
height: 100
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Clojure",
"ColdFusion",
"Fortran",
"Haskell",
"JavaScript",
$( "#tags" ).autocomplete({
source: availableTags
&div class="ui-widget"&
&label for="tags"&标签：&/label&
&input id="tags"&
本实例演示如何获取一些 XML 数据，并使用 jQuery 的方法解析它，然后把它提供给 autocomplete 作为数据源。
本实例也可作为解析远程 XML 数据源的参考 - 解析在每次 source 回调请求时发生。
&!doctype html&
&html lang="en"&
&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"&
.ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no- }
$(function() {
function log( message ) {
$( "&div/&" ).text( message ).prependTo( "#log" );
$( "#log" ).attr( "scrollTop", 0 );
url: "london.xml",
dataType: "xml",
success: function( xmlResponse ) {
var data = $( "geoname", xmlResponse ).map(function() {
value: $( "name", this ).text() + ", " +
( $.trim( $( "countryName", this ).text() ) || "(unknown country)" ),
id: $( "geonameId", this ).text()
$( "#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 );
&div class="ui-widget"&
&label for="birds"&London 匹配：&/label&
&input id="birds"&
&div class="ui-widget" style="margin-top:2 font-family:Arial"&
&div id="log" style="height: 200 width: 300 overflow:" class="ui-widget-content"&&/div&
记住登录状态
重复输入密码}