Autocomplete 两个不同的更新版本
Autocomplete 是一个实现输入框自动完成的 jQuery 插件，oschina好像就使用了这款插件。
运行后界面如下图所示：
从 Autocomplete 的上发现该插件已经不再更新（最后版本是1.0.2）了。
但作者介绍了两个在其基础上进行改进的版本，分别是：
在 github 的最新版本是 1.2.1 AGA，而在 Google code 上的最新版本是 R3.2.2 ，二者的版本命名方式不同。
两者都沿用了该插件之前的使用方法，并进行改进、bug修复以及兼容最新的jQuery 版本。
Autocomplete 的详细介绍：
Autocomplete 的下载地址：
转载请注明：文章转载自 开源中国社区
本文标题：Autocomplete 两个不同的更新版本
本文地址：2011年9月 总版技术专家分月排行榜第一2011年8月 总版技术专家分月排行榜第一2011年7月 总版技术专家分月排行榜第一2011年6月 总版技术专家分月排行榜第一2011年5月 总版技术专家分月排行榜第一2011年4月 总版技术专家分月排行榜第一
2011年3月 总版技术专家分月排行榜第二2011年2月 总版技术专家分月排行榜第二
本帖子已过去太久远了，不再提供回复功能。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="///ui/1.10.4/themes/smoothness/jquery-ui.css"&
&script src="///jquery-1.9.1.js"&&/script&
&script src="///ui/1.10.4/jquery-ui.js"&&/script&
&link rel="stylesheet" href="/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="///ui/1.10.4/themes/smoothness/jquery-ui.css"&
&script src="///jquery-1.9.1.js"&&/script&
&script src="///ui/1.10.4/jquery-ui.js"&&/script&
&link rel="stylesheet" href="/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="///ui/1.10.4/themes/smoothness/jquery-ui.css"&
&script src="///jquery-1.9.1.js"&&/script&
&script src="///ui/1.10.4/jquery-ui.js"&&/script&
&link rel="stylesheet" href="/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="///ui/1.10.4/themes/smoothness/jquery-ui.css"&
&script src="///jquery-1.9.1.js"&&/script&
&script src="///ui/1.10.4/jquery-ui.js"&&/script&
&link rel="stylesheet" href="/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( "bobox", {
_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="///ui/1.10.4/themes/smoothness/jquery-ui.css"&
&script src="///jquery-1.9.1.js"&&/script&
&script src="///ui/1.10.4/jquery-ui.js"&&/script&
&link rel="stylesheet" href="/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="///ui/1.10.4/themes/smoothness/jquery-ui.css"&
&script src="///jquery-1.9.1.js"&&/script&
&script src="///ui/1.10.4/jquery-ui.js"&&/script&
&link rel="stylesheet" href="/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="///ui/1.10.4/themes/smoothness/jquery-ui.css"&
&script src="///jquery-1.9.1.js"&&/script&
&script src="///ui/1.10.4/jquery-ui.js"&&/script&
&link rel="stylesheet" href="/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="///ui/1.10.4/themes/smoothness/jquery-ui.css"&
&script src="///jquery-1.9.1.js"&&/script&
&script src="///ui/1.10.4/jquery-ui.js"&&/script&
&link rel="stylesheet" href="/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="///ui/1.10.4/themes/smoothness/jquery-ui.css"&
&script src="///jquery-1.9.1.js"&&/script&
&script src="///ui/1.10.4/jquery-ui.js"&&/script&
&link rel="stylesheet" href="/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="///ui/1.10.4/themes/smoothness/jquery-ui.css"&
&script src="///jquery-1.9.1.js"&&/script&
&script src="///ui/1.10.4/jquery-ui.js"&&/script&
&link rel="stylesheet" href="/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="///ui/1.10.4/themes/smoothness/jquery-ui.css"&
&script src="///jquery-1.9.1.js"&&/script&
&script src="///ui/1.10.4/jquery-ui.js"&&/script&
&link rel="stylesheet" href="/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="///ui/1.10.4/themes/smoothness/jquery-ui.css"&
&script src="///jquery-1.9.1.js"&&/script&
&script src="///ui/1.10.4/jquery-ui.js"&&/script&
&link rel="stylesheet" href="/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&
记住登录状态
重复输入密码