jQuery.Autocomplete 是jquery的流行插件,能够很好的实现输入框的自动完成(autocomplete)、建议提示(input suggest)功能,支持ajax数据加载。
官方网站:
官网上的一个完整的简单例子:
-
<!doctype html>
-
<html lang="en">
-
<head>
-
<meta charset="utf-8">
-
<title>jQuery UI Autocomplete - Default functionality</title>
-
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
-
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
-
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
-
<link rel="stylesheet" href="/resources/demos/style.css">
-
<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>
-
-
<div class="ui-widget">
-
<label for="tags">Tags: </label>
-
<input id="tags">
-
</div>
-
-
-
</body>
-
</html>
一 数据源的指定
此功能最主要的参数是source,设置匹配菜单中的数据项,设置方式:
1、string数组参数,格式:[ "Choice1", "Choice2" ]
-
初始化时:
-
$( ".selector" ).autocomplete({ source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] });
-
-
-
初始化后
-
// getter
-
var source = $( ".selector" ).autocomplete( "option", "source" );
-
-
-
// setter
-
$( ".selector" ).autocomplete( "option", "source", [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] );
2、object数组参数,格式[ { label: "Choice1", value: "value1" }, ... ]
其中label是在匹配菜单中显示项的值,而value,是选中此匹配项后,append到
中的真实值
3、string参数
如果是string参数,则是指定一个远程的数据源,然后当
中有输入变化,即change事件后,会自动将输入的内容,以GET方式发送到远程数据源,其中输入内容以term参数保存;
例如,参数为,那么在用户输入abc后,将会发送一个GET请求如?term=abc
返回的结果必须以json格式,数据格式如上面1、2描述
然后在服务器端接收,并输出相应结果,注意默认传递的参数名称为term:
-
public void ProcessRequest(HttpContext context)
-
{
-
// 查询的参数名称默认为term
-
string query = context.Request.QueryString["term"];
-
context.Response.ContentType = "text/javascript";
-
//输出字符串数组 或者 JSON 数组
-
context.Response.Write("[{\"label\":\"博客园\",\"value\":\"cnblogs\"},{\"label\":\"囧月\",\"value\":\"囧月\"}]");
-
}
4、function参数,格式 Function( Object request, Function response( Object data ) )
这种参数最灵活,可以让你以自己的方式向服务器发出查询,并自己解析数据,最后将数据回写到response即可
-
$ ( ".selector" ). autocomplete ({
-
source: function(request,response){
-
//获取用户输入
-
var term = request.term;
-
//根据自定义方式从服务器获取数据
-
...
-
//还可以自己解析数据
-
..
-
//最后把数据按照前面1、2描述的格式,放到response中
-
response(data);
-
}
-
});
一个例子:
-
var hosts = ["gmail.com", "live.com", "hotmail.com", "yahoo.com", "cnblogs.com", "火星.com", "囧月.com"];
-
$("#email1").autocomplete({
-
autoFocus: true,
-
source: function(request, response) {
-
var term = request.term, //request.term为输入的字符串
-
ix = term.indexOf("@"),
-
name = term, // 用户名
-
host = "", // 域名
-
result = []; // 结果
-
-
result.push(term);
-
// result.push({ label: term, value: term }); // json格式
-
if (ix > -1) {
-
name = term.slice(0, ix);
-
host = term.slice(ix + 1);
-
}
-
if (name) {
-
var findedHosts = (host ? $.grep(hosts, function(value) {
-
return value.indexOf(host) > -1;
-
}) : hosts),
-
findedResults = $.map(findedHosts, function(value) {
-
return name + "@" + value; //返回字符串格式
-
// return { label: name + " @ " + value, value: name + "@" + value }; // json格式
-
});
-
result = result.concat($.makeArray(findedResults));
-
}
-
response(result);//呈现结果
-
}
-
});
二 功能支持:
此自动补全功能,支持
阅读(3758) | 评论(0) | 转发(0) |