jQuery 入门教程(23): jQuery UI Autocomplete示例（一）

最新推荐文章于 2020-12-01 14:48:12 发布

iteye_9252

最新推荐文章于 2020-12-01 14:48:12 发布

阅读量304

点赞数

文章标签： ui javascript java ViewUI

本文介绍AutoComplete组件的基本用法及高级特性，包括如何利用本地数据源实现语言列表自动补全，支持语调字符的搜索匹配，以及通过自定义UI组件实现分类支持。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

AutoComplete 在获取焦点后，随着用户键入的内容，可以在预订的数据源中查找和已输入的内容相匹配的内容列表供用户选择。
这可以用作之前输入过的内容也可以用作自动填充相关内容，比如根据城市名，自动填充邮编等。
你可以使用本地数据源或是远程数据源，本地数据一般使用小数据集合，比如包含50条记录的通讯录，远程数据源一般为保护大量记录的数据库。
基本用法
本例为使用AutoComplete的基本用法，通过本地数据源（数组）定义一组语言列表，用户输入字母后，包含该字母的语言会作为列表显示出来：

 
    1<!doctype html>
 
<htmllang="en"> 
 
<head> 
 
<metacharset="utf-8"/> 
 
<title>jQuery UI Demos</title> 
 
<linkrel="stylesheet"href="themes/trontastic/jquery-ui.css"/> 
 
<scriptsrc="scripts/jquery-1.9.1.js"></script> 
 
<scriptsrc="scripts/jquery-ui-1.10.1.custom.js"></script> 
 
    9
 
<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> 
 
<divclass="ui-widget"> 
 
<labelfor="tags">Tags: </label> 
 
<inputid="tags"/> 
 
</div> 
 
</body> 
 
</html>

语调支持
某些语言支持语调字符，比如Jörn 中的ö，希望在输入o时，也能显示包含ö的内容，AutoComplete支持使用function来定义Source属性：

 
    1<!doctype html>
 
<htmllang="en"> 
 
<head> 
 
<metacharset="utf-8"/> 
 
<title>jQuery UI Demos</title> 
 
<linkrel="stylesheet"href="themes/trontastic/jquery-ui.css"/> 
 
<scriptsrc="scripts/jquery-1.9.1.js"></script> 
 
<scriptsrc="scripts/jquery-ui-1.10.1.custom.js"></script> 
 
    9
 
<script> 
 
$(function () { 
 
var names = ["Jörn Zaefferer", 
 
"Scott González", 
 
"John Resig"]; 
 
    15
 
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; 
 
}; 
 
    28
 
$("#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; 
 
return matcher.test(value) 
 
|| matcher.test(normalize(value)); 
 
})); 
 
} 
 
}); 
 
}); 
 
</script> 
 
</head> 
 
<body> 
 
<divclass="ui-widget"> 
 
<form> 
 
<labelfor="developer">Developer: </label> 
 
<inputid="developer"/> 
 
</form> 
 
</div> 
 
</body> 
 
</html>

分类支持
本例是提供简单扩展AutoComplete 组件实现了一个自定义的custom.catcomplete UI组件以支持AutoComplete的分类支持。自定义组件有兴趣的可以参见jQuery 的Widget Factory。一般无需自定义UI组件，如果需要，可以在网站查找是否有人已经实现你需要的UI组件，实在不行才自定义UI组件，使用Widget Factory自定义组件的方法并不十分直观（这是因为JavaScript使用了面向“原型”的面向对象方法，而非通常的使用类的面向对象方法）。

 
    1<!doctype html>
 
<htmllang="en"> 
 
<head> 
 
<metacharset="utf-8"/> 
 
<title>jQuery UI Demos</title> 
 
<linkrel="stylesheet"href="themes/trontastic/jquery-ui.css"/> 
 
<scriptsrc="scripts/jquery-1.9.1.js"></script> 
 
<scriptsrc="scripts/jquery-ui-1.10.1.custom.js"></script> 
 
    9
 
<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("<liclass='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" } 
 
]; 
 
    47
 
$("#search").catcomplete({ 
 
delay: 0, 
 
source: data 
 
}); 
 
}); 
 
</script> 
 
</head> 
 
<body> 
 
<labelfor="search">Search: </label> 
 
<inputid="search"/> 
 
</body> 
 
</html>