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

原创 2011年01月12日 17:28:00

本文主要涉及了三方面的技术,在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());

 

 

 

版权声明:本文为博主原创文章,未经博主允许不得转载。

JS获取中文拼音首字母,并通过拼音首字母快速查找页面内的中文内容

实现效果:图一:图二:此例中输入的中文字符串“万万保重”,有三个字是多音字,所以alert对话框中显示的是多种读音的组合;如何实现?如何实现通过拼音首字母快速查找页面内的中文内容呢?过程原理是这样的:...
  • testcs_dn
  • testcs_dn
  • 2014年05月06日 13:26
  • 53596

jQueryAutocomplete使用,支持输入中英文模糊匹配

近期项目中有个需求:支持text文本框输入模糊匹配查询,找了下资料,jQuery有个插件jQuery.autocomplete,可以满足需求,故研究了下,记录下来。 项目中试用的前端语言是velo...
  • u014721131
  • u014721131
  • 2015年09月06日 15:26
  • 1706

Jquery Autocomplete 拼音首字母匹配

  • 2012年06月14日 16:24
  • 656KB
  • 下载

jquery.autocomplete 用户输入城市名、或拼音即可有匹配的提示

  • 2012年01月05日 12:52
  • 84KB
  • 下载

AutoCompleteTextView实现拼音汉字匹配且支持首字母

Pinyin4j的基本用法 1.     简单介绍 有时候,需要将汉字编程对应的拼音,以方便数据的处理。比如在Android手机应用的开发上,要查询联系人的姓名,通常都是用拼音进行查询的。...
  • u010581811
  • u010581811
  • 2014年01月01日 11:32
  • 1621

ios搜索(可实现模糊搜索 支持拼音检索 首字母等)

一、搜框中输入关键字的事件响应-(void)searchBar:(UISearchBar *)searchBar textDidChange:(NSString *)searchText{ NS...
  • dream9393
  • dream9393
  • 2017年06月13日 18:05
  • 1814

Android类似通讯录模糊匹配搜索实现(号码、首字母、简拼、全拼)

根据数字,首字母,全拼,简拼实现数据检索
  • luckrr
  • luckrr
  • 2016年07月28日 15:58
  • 8874

jquery Autocomplete 实现自动补全(四)解决jquery 高版本不支持browser方法

解决jquery 高版本不支持browser方法,实现 jquery autocomplete 自动补全方法
  • Iamagril
  • Iamagril
  • 2015年09月11日 11:36
  • 5503

mysql 中如何取得汉字字段的各汉字首字母, 并根据首字母进行查询

1.  建立函数 BEGIN DECLARE tmp_str VARCHAR(1000) charset gbk DEFAULT '' ; #截取字符串,每次做截取后的字符串存放在该变量...
  • maguanghui_2012
  • maguanghui_2012
  • 2015年09月16日 14:47
  • 2330

Android通讯录模糊匹配搜索实现(号码、首字母、简拼、全拼)

转载自:http://blog.csdn.net/wwj_748/article/details/17238843 2013年12月10日 工作记录 小巫在工作中碰到一个需求,要求实现通讯...
  • lyglostangel
  • lyglostangel
  • 2015年04月07日 15:22
  • 1606
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery AutoComplete 兼容汉字首字母 MVC2进行查询
举报原因:
原因补充:

(最多只允许输入30个字)