jquery AutoComplete 兼容汉字首字母 MVC2进行查询
本文主要涉及了三方面的技术，在google上找到的技术资料进行整合。下面是用到的博客文章
//jQuery autocomplete 插件进行自定义方法进行查询
http://www.cnblogs.com/eflylab/archive/2009/09/18/1569043.html
//获得汉字首字母的博客
在此表示对作者表示歉意，忘记了。时间紧。先写完以后找到再添加。希望大家也帮我找找然后添加上来
1、jQuery autocomplete插件自定义方法进行查询
下面是在上面的博客上找到的资料
<script type="text/javascript">
var stockInfoJson = [
{ name: "深发展A", code: "000001",spell:"sfza" },
{ name: "万科A", code: "000002",spell:"wka"},
{ name: "ST 国 农", code: "000004",spell:"stgn" },
{ name: "世纪星源", code: "000005",spell:"sjxy" },
{ name: "深振业A", code: "000006" ,spell:"szya"},
{ name: "ST 达 声", code: "000007" ,spell:"stds"},
{ name: "ST宝利来", code: "000008" ,spell:"stbll"},
{ name: "中国宝安", code: "000009" ,spell:"zgba"},
{ name: "S ST华新", code: "000010" ,spell:"ssthx"},
{ name: "山航B", code: "200152" ,spell:"shb"},
{ name: "*ST帝贤B", code: "200160" ,spell:"stdxb"},
{ name: "雷伊B", code: "200168" ,spell:"lyb"},
{ name: "宝石B", code: "200413",spell:"bsb" },
{ name: "小天鹅B", code: "200418" ,spell:"xteb"},
{ name: "粤高速B", code: "200429" ,spell:"agsb"},
{ name: "宁通信B", code: "200468" ,spell:"ltxb"},
{ name: "晨鸣B", code: "200488" ,spell:"cmb"},
{ name: "珠江B", code: "200505" ,spell:"zjb"},
{ name: "闽灿坤B", code: "200512" ,spell:"mskb"},
{ name: "华电国际", code: "600027" ,spell:"hdgj"}
];
$(function(){
$("#suggest1").autocomplete(stockInfoJson, {
minChars:0,
matchCase:false,//不区分大小写
autoFill: false,
max: 10,
formatItem: function(row, i, max,term) {
var v = $("#suggest1").val();
return row.name + " (" + row.code + ")";
},
formatResult: function(row) {
return row.code;
},
resultSearch:function(row,v)//本场数据自定义查询语法 注意这是我自己新加的事件
{
//自定义在code或spell中匹配
if(row.data.code.indexOf(v) == 0 || row.data.spell.indexOf(v) == 0)
{
return row;
}
else
return false;
}
});
});
</script>
<body>
<h1>jquery.autocomplete.js 扩展自定义查询方法</h1>
<p>
楚旋--博客园<a href='http://eflylab.cnblogs.com' target='_blank'>http://eflylab.cnblogs.com</a> 本文链接
<a href='http://www.cnblogs.com/eflylab/archive/2009/09/18/1569043.html' target='_blank'>jquery.autocomplete.js 插件的自定义搜索规则</a>
</p>
<p>
<label>StockInfo(local):</label>
<input type="text" id="suggest1" />
</p>
</body>
</html>
但是我使用的时候遇到了问题，不好用（不是他这种方法不好用).
我的项目是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());