jQuery.Autocomplete插件的使用

郑浩博

2023-12-01

jQuery.Autocomplete 是jquery的流行插件，能够很好的实现输入框的自动完成(autocomplete)、建议提示(input suggest)功能，支持ajax数据加载。
官方网站： http://jqueryui.com/autocomplete/

官网上的一个完整的简单例子：

<!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到<input>中的真实值

3、string参数

如果是string参数，则是指定一个远程的数据源，然后当<input>中有输入变化，即change事件后，会自动将输入的内容，以GET方式发送到远程数据源，其中输入内容以term参数保存；
例如，参数为http://remoteSource，那么在用户输入abc后，将会发送一个GET请求如http://remoteSource?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);//呈现结果
}
});

二功能支持：

此自动补全功能，支持<input><textarea>或者有contenteditable 属性的标签

键盘操作：
1、上下键可以选择匹配项
2、esc建可以关闭匹配菜单
3、enter建可以选择当前选中的匹配项
4、pageup pagedown 可以操作匹配菜单中的滚动条

CSS：
1、ui-autocomplete：匹配菜单中匹配项的css属性
2、ui-autocomplete-input：输入框的属性

依赖：
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

三主要的事件

有一些事件，可用于在一些阶段进行额外的控制：

create(event, ui)：Autocomplete创建时，可以在此事件中，对外观进行一些控制
search(event, ui)：在开始请求之前，可以在此事件中返回false来取消请求
open(event, ui)：Autocomplete的结果列表弹出时
focus(event, ui)：Autocomplete的结果列表任意一项获得焦点时，ui.item为获得焦点的项
select(event, ui)：Autocomplete的结果列表任意一项选中时，ui.item为选中的项
close(event, ui)：Autocomplete的结果列表关闭时
change(event, ui)：当值改变时，ui.item为选中的项

这些事件的ui参数的item属性（如果有的话）默认有label和value属性，不管在source中设置的数据是Array还是JSON数组，家装网如下3种：
["cnblogs","博客园","囧月"]
[{label: "博客园", value: "cnblogs"}, {label: "囧月", value: "囧月"}]
[{label: "博客园", value: "cnblogs", id: "1"}, {label: "囧月", value: "囧月", id: "2"}]

假如是第三种的话，还可以得到ui.item.id的值。
这些事件可以通过2种方式来绑定，如下：

// 在参数中
$("#autocomp").autocomplete({
source: availableTags
, select: function(e, ui) {
alert(ui.item.value)
}
});
// 通过bind来绑定
$("#autocomp").bind("autocompleteselect", function(e, ui) {
alert(ui.item.value);
});

通过bind来绑定的方式使用的事件名称为"autocomplete"+事件名称，如"select"就是"autocompleteselect"。

四多个值的Autocomplete

一般情况下，输入框的autocomplete仅需要一个值就可以(如：javascript)；假如需要多个值(如：javascript,c#,asp.net)，则需要绑定一些事件来进行额外处理，具体可以参考 http://www.cnblogs.com/lwme/archive/2012/02/12/jquery-ui-autocomplete.html

jQuery.Autocomplete插件的使用

一数据源的指定

1、string数组参数，格式：[ "Choice1", "Choice2" ]

2、object数组参数，格式[ { label: "Choice1", value: "value1" }, ... ]

3、string参数

4、function参数，格式 Function( Object request, Function response( Object data ) )

二功能支持：

三主要的事件

四多个值的Autocomplete

相关阅读

相关文章

相关问答

相关文档

jQuery.Autocomplete插件的使用

一 数据源的指定

1、string数组参数，格式：[ "Choice1", "Choice2" ]

2、object数组参数，格式[ { label: "Choice1", value: "value1" }, ... ]

3、string参数

4、function参数，格式 Function( Object request, Function response( Object data ) )

二 功能支持：

三 主要的事件

四 多个值的Autocomplete

相关阅读

相关文章

相关问答

相关文档

一数据源的指定

二功能支持：

三主要的事件

四多个值的Autocomplete