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

使用 jquery-autocomplete插件完成文本框输入自动填充联想效果解决兼容IE输入中文问题

2015-04-23 01:40 1401 查看

项目中有时会用到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("\n");
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;

}

http://files.cnblogs.com/files/amoniyibeizi/autocomplete.rar 修改后源码下载链接

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

使用 jquery-autocomplete插件 完成文本框输入自动填充联想效果 解决兼容IE输入中文问题

使用 jquery-autocomplete插件完成文本框输入自动填充联想效果解决兼容IE输入中文问题