项目中有时会用到ajax自动补全查询，就像Google的搜索框中那样，输入汉字或者字母的首个字母，则包含这个汉字或者字母的相关条目会显示出来供用户选择，该插件就是实现这样的功能的。autocomplete官网 ： http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ （可下载jQuery autocomplete插件）。
下面代码演示Demo
前端代码 主要引用JS文件
// 引用JS
<script src="~/Content/artDialog/lib/jquery-1.10.2.js"></script>
<script src="~/Content/jquery-autocomplete/lib/jquery-migrate-1.2.1.js"></script>
<script src="~/Content/jquery-autocomplete/jquery.autocomplete.js"></script>
<script src="~/Content/jquery-autocomplete/demo/localdata.js"></script>
<link href="~/Content/jquery-autocomplete/jquery.autocomplete.css" rel="stylesheet" />
JS调用代码 此处采用GetJSON的方式 实际是验证本地数据返回的JSON 如果是远程验证对返回的JSON格式有一定要求
//JS调用
<script type="text/javascript">
$(function () {
$.getJSON("/Home/Seach", function (msg) {
$(".suggest13").autocomplete(msg, {
minChars: 0,//响应从输入的第一次字符开始
multiple:true,//多查询
formatItem: function (row, i, max) {
return i + "/" + max + ": "" + row.Pinyin + "" [" + row.CName + "]" + "" [" + row.charName + "]";//显示的联想字段
},
formatMatch: function (row, i, max) {
return row.Pinyin, row.UserNo; //需要索引匹配的字段
},
formatResult: function (row) {
return row.CName; //选择后返回的字段
}
});
});
});
</script>
Html代码
//Html代码
<body>
<p>
<label>Single City (local):</label>
<input type="text" id="suggest13" class="suggest13" />
</p>
</body>
后端数据源 验证本地数据时的Json格式
//验证本地数据时的Json格式
public ActionResult Seach() { List<Pesron> list = new List<Pesron>(); Pesron p = new Pesron(); p.Pinyin = "laula"; p.Name = "李四"; p.UserNo = "280836"; p.workNo = "40657"; p.CName = "laula 280836"; p.charName = "李四 40657"; Pesron p1 = new Pesron(); p1.Pinyin = "lausi"; p1.Name = "李四01"; p1.UserNo = "280836"; p1.workNo = "40657"; p1.CName = "lausi 280836"; p1.charName = "李四01 40657"; Pesron p2 = new Pesron(); p2.Pinyin = "lisls"; p2.Name = "李四02"; p2.UserNo = "280836"; p2.workNo = "40657"; p2.CName = "lisls 280836"; p2.charName = "李四02 40657"; list.Add(p); list.Add(p1); list.Add(p2); return Json(list, JsonRequestBehavior.AllowGet); } public class Pesron { public string Pinyin { get; set; } public string Name { get; set; } public string UserNo { get; set; } public string workNo { get; set; } public string CName { get; set; } public string charName { get; set; } }
显示效果
这样就实现了 文本框 自动联想填充了 具体使用手册可以看http://www.cnblogs.com/amoniyibeizi/p/4449162.html
解决兼容IE问题 修改后的源码
//重写parse方法 放在formatResult方法之后 parse: function (data) { var parsed = []; var rows = data.split(" "); for (var i=0; i < data.length; i++) { var item = {}; item.Data = data[i]; item.value = data[i][0]; item.result = this.formatResult && this.formatResult(data[i], data[i][0]) || data[i][0]; parsed.push(item); } return parsed; }
https://files.cnblogs.com/files/amoniyibeizi/autocomplete.rar 修改后源码 下载链接