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());

 

 

 

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

相关文章推荐

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

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

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

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

WinForm中实现汉字首字母文本输入框自动提示(AutoCompleted)

WinForm 汉字首字母 文本输入框 自动提示 AutoCompleted
  • aplsc
  • aplsc
  • 2010年11月29日 03:17
  • 3265

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

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

jQuery.Autocomplete实现自动完成功能(详解)

1、jquery.autocomplete参考地址 http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ http:...

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

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

jquery easyui实现汉字拼音首字母模糊查询

jqueryeasyui的combobox拼音首字母模糊查询

js取得汉字首字母,并转化成大写。兼容火狐。

直接上代码,取汉字首字母的js方法是在网上搜的,网上大部分不支持火狐,下面的js支持火狐亲测通过。如果有问题可留言相互讨论。 ...
  • mdcmy
  • mdcmy
  • 2012年07月10日 17:52
  • 2102

获取字符串汉字首字母,兼容GBK和UTF-8

function getfirstchar($s0){   //获取单个汉字拼音首字母。注意:此处不要纠结。汉字拼音是没有以U和V开头的     $fchar = ord($s0{0});    ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery AutoComplete 兼容汉字首字母 MVC2进行查询
举报原因:
原因补充:

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