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