jQuery UI Autocomplete是大家熟悉的一款输入提示插件，可实现像百度搜索那样的输入框提示功能，在Windows系统中叫做“自动完成”，当用户的输入有匹配内容的时候，输入框会下拉出很多相关选项，供用户选择，大大提升用户体验。测试时请试着在第一个文本框中输入以a b c开头的单词。

点击(此处)折叠或打开

<!doctype html>
<html lang=\"en\">
<head>
<meta charset=\"utf-8\" />
<title>jQuery UI Autocomplete自动完成下拉框提示</title>
<script src=\"/ajaxjs/jquery-1.6.2.min.js\"></script>
<script src=\"/ajaxjs/jquery-ui-1.8.20.min.js\"></script>
<script>
$(function() {
var availableTags = [
\"ActionScript\",
\"AppleScript\",
\"Asp\",
\"BASIC\",
\"C\",
\"C++\",
\"Clojure\",
\"COBOL高\",
\"ColdFusion\",
\"Erlang\",
\"Fortran\",
\"Groovy\",
\"Haskell\",
\"Java\",
\"JavaScript\",
\"Lisp\",
\"Per高l\",
\"PHP\",
\"Python\",
\"Ruby\",
\"Scala\",
\"Sche高\"
];
$( \"#tags1\" ).autocomplete({
source: availableTags
});
$(\"#tags2\").autocomplete({
source: [\"a\", \"b\", \"c\"]
});
//页面加载
$(\"#tags3\").autocomplete({
source: DataSouce1()
});
//数据库
$(\"#tags4\").autocomplete({
source: function( request, response ) {
var name=$.ui.autocomplete.escapeRegex( request.term );
response( $.grep( DataSouce2(name), function( item ){
return item;
}) );
}
});
//利用ajax页面加载就获取到数据源
function DataSouce1()
{
var mycars=new Array()
for (var i = 0; i <100; i++) {
mycars[i]=\"高\"+i;
};
return mycars;
}
//利用ajax根据输入的到数据库查找相当于
function DataSouce2(name)
{
var mycars=new Array()
for (var i = 0; i <100; i++) {
mycars[i]=name+\"_\"+i;
};
return mycars;
}
});
</script>
</head>
<body>
测试时请试着在第一个文本框中输入以a b c开头的单词。<br>
<div class=\"ui-widget\">
<label for=\"tags\">Tags: </label>
<input id=\"tags1\" />
<input id=\"tags2\" />
<input id=\"tags3\" />
<input id=\"tags4\" />
</div>
</body>
</html>

ITPub博客

jQuery UI Autocomplete例子，输入框提示

最新文章