jquery AutoComplete 兼容汉字首字母 MVC2进行查询

最新推荐文章于 2020-10-21 16:12:16 发布

Pipi0714

最新推荐文章于 2020-10-21 16:12:16 发布

阅读量8.5k

点赞数 1

分类专栏： Java/JSP/ASP/ 文章标签： autocomplete jquery mvc function delay javascript

本文链接：https://blog.csdn.net/pipi0714/article/details/6132158

版权

Java/JSP/ASP/ 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

本文主要涉及了三方面的技术，在google上找到的技术资料进行整合。下面是用到的博客文章

//jQuery autocomplete 插件进行自定义方法进行查询

http://www.cnblogs.com/eflylab/archive/2009/09/18/1569043.html

//获得汉字首字母的博客

在此表示对作者表示歉意，忘记了。时间紧。先写完以后找到再添加。希望大家也帮我找找然后添加上来

1、jQuery autocomplete插件自定义方法进行查询

下面是在上面的博客上找到的资料

但是我使用的时候遇到了问题，不好用（不是他这种方法不好用).

我的项目是MVC2 + JQuery 1.4.4 + JQuery Autocomplete

AutoComplete原作者的数据是在脚本中定义的数组，但是我的是MVC2的控制器返回的Json,因此出现了问题。

MVC2中的代码，很简单

public ActionResult GetEntireModels()
{
List<Automonitor.Models.Entity.Station> lst = bll.GetNameList();
return Json(lst, JsonRequestBehavior.AllowGet);
}

我的客户端写法

$("#stationNames").autocomplete(“/Station/GetEntireModels", {
minChars: 0,
matchCase: false,
autoFill: false,
delay: 10,
max: 10,
formatItem: function(row, i, max, term) {
return row.S_Name;
},
formatResult: function(row) {
return row.S_No;
},
resultSearch: function(row, v) {
var firstPY = getStringFirstChar(row.data.S_Name);
if (row.data.S_Name.indexOf(v) == 0 || firstPY.indexOf(v) == 0) {
return row;
}
else
return false;
}
});

//此时出现问题，jquery.autocomplete.js中的函数parse出现错误

查找资料和插件自带的demo修改为如下写法

$("#stationNames").autocomplete(“/Station/GetEntireModels", {
minChars: 0,
matchCase: false,
autoFill: false,
delay: 10,
max: 10,
formatItem: function(row, i, max, term) {
return row.S_Name;
},

parse: function(data) {
return $.map(data, function(row) {
return {
data: row,
value: row.S_Name,
result: row.S_No
}
});
}
,
resultSearch: function(row, v) {
var firstPY = getStringFirstChar(row.data.S_Name);
if (row.data.S_Name.indexOf(v) == 0 || firstPY.indexOf(v) == 0) {
return row;
}
else
return false;
}
});

此时的现象，不过滤。即无论输入什么都显示全部的数据。显示全部数据正常

网上也有下面的修改方法但是还是不好用

parse: function(data) {

var rows[];

for(var i = 0; i < data.length; i++){

rows[rows.length] = {

data:data[i]...

....

}

类似的代码，我经过测试还是原先原先的现象（不过滤。即无论输入什么都显示全部的数据。显示全部数据正常）

后来又查了资料在jQuery Autocomplete的官方网站上发现了一小段文字

$.getJSON....

很受启发，立即测试一切OK!

下面是正确的代码，贴出来

$.getJSON("/Station/GetEntireModels", null, function(data) {
$("#stationNames").autocomplete(data, {
minChars: 0,
matchCase: false,
autoFill: false,
delay: 10,
max: 10,
formatItem: function(row, i, max, term) {
return row.S_Name;
},
formatResult: function(row) {
return row.S_No;
},
resultSearch: function(row, v) {
var firstPY = getStringFirstChar(row.data.S_Name);
if (row.data.S_Name.indexOf(v) == 0 || firstPY.indexOf(v) == 0) {
return row;
}
else
return false;
}
});
});

这样在输入的时候就可以兼容拼音首字母了。

例如：八一，我输入b也可以找到此项

这就是我的经验笔记！希望大家多多指正。

本文还有为解决的问题，拼音字首字母的问题。现在代码存在多音字的问题。

即:重庆，应该是cq, 由于重是多音字现在的代码将它将解析成zq，请大家多多指教这方面的问题。

遗留问题:使用javascript如何获得多音字的首字母

另外对于.net的用户可以使用ChnCharInfo的类库来获得汉字的拼音，当然了首字母更能获得了。另外他可以返回这个字的所有拼音也就是

兼容多音字。但是我认为每次都ajax调用MVC2的控制器来返回他的首字母，影响性能。所以不推荐。这个库不但能返回拼音还能返回笔画

和声调，很强大要是在.net中应用很好的！

vsintlpack1.zip

下载地址:http://www.microsoft.com/downloads/details.aspx?FamilyID=44cac7f0-633b-477d-aed2-99aee642fc10&DisplayLang=zh-cn

简单的使用方法:

ChineseChar sss = new ChineseChar('中');

StringBuilder sbzzm = new StringBuilder();

foreach (string pin in sss.Pinyins) //所有的音，通过调试发现最多是8个音
{
sbzzm.Append(pin); //没有音pin=null
}

MessageBox.Show(sbzzm.ToString());