jQuery插件autoComplete介绍
概述:AutoComplete为自动填充,展示之意。用户在使用文本框搜索信息时,使用插件的autoplete方法绑定文本框。当在文本框中输入某个字符时,通过该方法中的指定的数据URL,返回相匹配的数据,自动显示在文本框下,提醒用户进行选择。如百度搜索和google等。
一、创建方法以及属性简介
a) 创建方法
$("文本框元素").autocomplete({source:["java","javaWeb"]});
b) 属性简介
minChars 表示自动完成前填入的最小字符,如果为0,则双击空白文本框时,显示全部的提示数据信息
max 表示显示的提示信息数据的总条数
autoFill 布尔值,表示是否选中自动填充文本框的内容
mustMatch 布尔值,表示是否匹配,设为True时,则文本框中内容必须是匹配数据,如果不是,则清空文本框
matchContains 布尔值,表示是否包含匹配数据,设置为true时,则文本框中内容只要被匹配数据包含则显示提示数据,否则不显示。
scrollHeight 设置匹配数据滚动显示的高度
二、本地数据举例
<body>
<div>
<h1>
autoComplete
</h1>
<div class="ui-widget">
<input type="text" id="autocomplete" size="40px" />
</div>
</div>
</body>
//定义本地数据,此数据应该为js的数组对象,包含多个值来指定给文本框来源
Var data=["java","javaWeb","javaScript"];
$("#autocomplete").autocomplete( {
source : data;
});
三、请求后台数据来完成操作
a) 普通数组的数据
//直接把source指定上请求数据的url即可,它会默认的传入参数为term 值为文本框当前的值
$("#autocomplete").autocomplete( {
source : "./csdn/admins.action"
})
b) Json数据的处理
//我们可以将json中其他的属性取出来显示当列表框中,还可以为它设定指定的格式显示。这样的情况json数据必须为标准化的,对象中也必须有value这个属性,它模式只识别value这个一个属性作为值,也就是说你选中的时候。Value的值会放到文本框中
$("#autocomplete").autocomplete( {
source : "./csdn/admins.action"
}).data("autocomplete")._renderItem = function(ul, item) {
return $("<li></li>").data("item.autocomplete", item).append(
"<a>"+ item.id +"---约 100个"+ item.userName+"</a>")
.appendTo(ul);
};
c) 利用自定义异步请求来完成操作