Jquery插件的使用--AutoComplete
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
Jquery插件的使用--AutoComplete
Jquery插件是很不错的一种客户体验,今天就来讲讲我使用的AutoComplete插件,首先需要做一些准备工作:这3个文件还是少不了的(可以到Jquery官网去下载)
一、直接使用构造的json数据来实现
然后当然是写js代码了,首先来个稍微简单点的,最后的一个列子讲解如何从数据库中提取数据来实现这个效果(实际上都差不多)
var data = [
{ name: "Peter", value: "peter@pan.de" },
{ name: "Molly", value: "molly@" },
{ name: "Forneria Marconi", value: "live@japan.jp" },
{ name: "Master Sync", value: "205bw@" },
{ name: "Dr. Tech de Log", to: "g15@" },
{ name: "Don Corleone", value: "don@" },
{ name: "Mc Chick", value: "info@" },
{ name: "Donnie Darko", value: "dd@" },
{ name: "Quake The Net", value: "webmaster@" },
{ name: "Dr. Write", value: "write@" },
{ name: "GG Bond", value: "Bond@" },
{ name: "Zhuzhu Xia", value: "zhuzhu@" },
{ name: "liubq", value: "liubenqian@" }
];
$(function () {
$('#keyword').autocomplete(data, {
max: 12, //列表里的条目数
minChars: 0, //自动完成激活之前填入的最小字符
width: 400, //提示的宽度,溢出隐藏
scrollHeight: 300, //提示的高度,溢出显示滚动条
matchContains: true, //包含匹配,就是data参数里的数据,是否只要包含文本框里的数据就显示
autoFill: false, //自动填充
//匹配的项所要发生的事件
formatItem: function (row, i, max) {//row表示每一行的数据对象,i表示每一行的编号,
max表示总的数据行数
return + "-->" + " " + row.value;
}
}).result(function (event, row, formatted) {
alert( + form);
});
});
这个比较简单,因为已经构造了一个json数据了(对json不理解的建议先看下json基础方面的知识)
二、从数据库中提取数据实现自动提示效果
好戏总是在后头,大家关心的还是怎么把数据库中的实际数据也能实现这样的效果对吧,废话不多说
先贴代码:
js代码:
$(function () {
$.getJSON("Handler2.ashx", function (data) {
$('#keyword').autocomplete(data, {
max: 12, //列表里的条目数
minChars: 0, //自动完成激活之前填入的最小字符
width: 400, //提示的宽度,溢出隐藏
scrollHeight: 300, //提示的高度,溢出显示滚动条
matchContains: true, //包含匹配,就是data参数里的数据,是否只要包含文本框里的数据就显示
autoFill: false, //自动填充
//匹配的项所要发生的事件
formatItem: function (row, i, max) {//row表示每一行的数据对象,i表示每一行的编号,max表示总的数据行数
// return i + '/' + max + ':"' + + '"[' + row.to + ']';
return row.ProductId + "-->" + " " + row.ProductName;
}
// formatMatch: function (row, i, max) {
// return row.ProductId + row.ProductName;
// },
// formatResult: function (row) {
// return row.ProductName;
// }