您的位置:首页 > Web前端 > JQuery

jquery.autocomplete.js 两种实现方法

2015-08-03 14:36 671 查看
<script type="text/javascript">
var v = 1;
var stockInfoJson = [
{ "name": "深发展A", "code": "000001", "spell": "sfza", "count":"32435" },
{ "name": "万科A", "code": "000002", "spell": "wka", "count":"231" },
{ "name": "ST 国 农", "code": "000004", "spell": "stgn", "count":"4567" },
{ "name": "世纪星源", "code": "000005", "spell": "sjxy", "count":"2345" },
{ "name": "深振业A", "code": "000006", "spell": "szya", "count":"8799" },
{ "name": "ST 达 声", "code": "000007", "spell": "stds", "count":"12345234" },
{ "name": "ST宝利来", "code": "000008", "spell": "stbll", "count":"56235" },
{ "name": "中国宝安", "code": "000009", "spell": "zgba", "count":"9833" },
{ "name": "S ST华新", "code": "000010", "spell": "ssthx", "count":"24878" },
{ "name": "山航B", "code": "200152", "spell": "shb", "count":"32435" },
{ "name": "*ST帝贤B", "code": "200160", "spell": "stdxb", "count":"32435" },
{ "name": "雷伊B", "code": "200168", "spell": "lyb", "count":"32435" },
{ "name": "宝石B", "code": "200413", "spell": "bsb", "count":"32435" },
{ "name": "小天鹅B", "code": "200418", "spell": "xteb", "count":"32435" },
{ "name": "粤高速B", "code": "200429", "spell": "agsb", "count":"32435" },
{ "name": "宁通信B", "code": "200468", "spell": "ltxb", "count":"32435" },
{ "name": "晨鸣B", "code": "200488", "spell": "cmb", "count":"32435" },
{ "name": "珠江B", "code": "200505", "spell": "zjb", "count":"32435" },
{ "name": "闽灿坤B", "code": "200512", "spell": "mskb", "count":"32435" },
{ "name": "华电国际", "code": "600027", "spell": "hdgj", "count":"32435" }
];

$(function () {
/*
$.ajax({
type: "POST",
contentType: "application/json",
url: "AjaxPage.aspx/GetAllHints",
data: "{}",
dataType: "json",
success: function (msg) {
var datas = eval('(' + msg.d + ')');
$("#keywords").autocomplete(
datas,
{
minChars: 1,
matchCase: false, //不区分大小写
autoFill: false,
max: 10,
formatItem: function (row, i, max) {
return "<table width='100%' border='0' cellspacing='0' cellpadding='0'><tr><td align='left' height='24'><b>" + row.name + "</b></td><td align='right'><font style='color: #009933; font-family: 黑体; font-style: italic'>约" + row.count + "个宝贝</font>  </td></tr></table>";
},
formatMatch: function (row, i, max) {
return row.name;
},
formatResult: function (row) {
return row.name;
},
reasultSearch: function (row, v)//本场数据自定义查询语法 注意这是我自己新加的事件
{
//自定义在code或spell中匹配
if (row.data.code.indexOf(v) == 0 || row.data.spell.indexOf(v) == 0 || row.data.name.indexOf(v) == 0) {
return row;
}
else {
return false;
}
}
}).result(function (event, data, formatted) {
var encodeKeyword = encodeURIComponent(encodeURIComponent(data.name));
searchParams = "keyword=" + encodeKeyword;
window.location.href = "http://localhost/products.aspx?" + searchParams;
});
}
});
*/

$("#keywords").autocomplete(
"SearchHanle.ashx",
{
minChars: 1,
matchCase: false, //不区分大小写
autoFill: false,
max: 10,
parse: function (data) {
var d = eval("(" + data + ")"); //此处要用eval函数;
var rows = new Array();
for (var i = 0; i < d.length; i++) {
rows[rows.length] = {
data: d[i],
value: d[i].code,
result: d[i].name
}
}
return rows;
},
formatItem: function (row, i, max) {
return "<table width='100%' border='0' cellspacing='0' cellpadding='0'><tr><td align='left' height='24'><b>" + row.name + "</b></td><td align='right'><font style='color: #009933; font-family: 黑体; font-style: italic'>约" + row.count + "个宝贝</font>  </td></tr></table>";
},
formatMatch: function (row, i, max) {
return row.name;
},
formatResult: function (row) {
return row.name;
},
reasultSearch: function (row, v)//本场数据自定义查询语法 注意这是我自己新加的事件
{
//自定义在code或spell中匹配
if (row.data.code.indexOf(v) == 0 || row.data.spell.indexOf(v) == 0 || row.data.name.indexOf(v) == 0) {
return row;
}
else {
return false;
}
}
}).result(function (event, data, formatted) {
var encodeKeyword = encodeURIComponent(encodeURIComponent(data.name));
searchParams = "keyword=" + encodeKeyword;
window.location.href = "http://localhost/products.aspx?" + searchParams;
});
});
</script>


先记一下,方法二是存在bug的。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: