jquery.autocomplete 根据拼音搜索

ycmail 2010-07-12 06:08:15
目前实现了可以根据汉字、字母搜索

需要实现的是 输入拼音首字母 显示出相应数据

例如 输入x 列出西安、西宁、咸阳 ...........

目前代码:

1、添加引用
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.autocomplete.js"></script>

2、js
<script type="text/javascript">
/*==========用户自定义方法==========*/
var cityList;
//autocomplete选项
var options = {
minChars: 1,
max: 500,
width: 250,
matchContains: true,
formatItem: function(row, i, max) {//显示出来的项格式
return row.StationName;
},
formatMatch: function(row, i, max) {
return row.StationName+" "+row.AreaName+" "+row.TypeName+" "+row.ManStationName ; //用户输入的内容在哪些数据项里面搜索。例如现在是在 基站、区域、类型、负责人;
},
formatResult: function(row) {
return row.StationName;
}
};
//autocomplete初始化函数
function initAutoComplete(json) {
$("#inputName").autocomplete(json, options);
$("#inputName").result(function(event, data, formatted) {//data 选中的行json对象. formatted是formatMatch返回的值.
$("#inputId").val(data.StationID);
});
}
/*==========加载时执行的语句==========*/
$(function() {
//加载城市数据, 并在回调函数中用返回的数据初始化autocomplete
$.getJSON("products.ashx", {}, function(json) {
initAutoComplete(json);
})
});
</script>

3、JsonHelper.cs

public class JsonHelper
{
public static string ConvertDataTableToJson(DataTable dt)
{
StringBuilder JsonString = new StringBuilder();
//Exception Handling
if (dt != null && dt.Rows.Count > 0)
{
JsonString.Append("[ ");
for (int i = 0; i < dt.Rows.Count; i++)
{
JsonString.Append("{ ");
for (int j = 0; j < dt.Columns.Count; j++)
{
if (j < dt.Columns.Count - 1)
{
JsonString.Append( dt.Columns[j].ColumnName.ToString() + ":" + "\"" + dt.Rows[i][j].ToString() + "\",");
}
else if (j == dt.Columns.Count - 1)
{
JsonString.Append( dt.Columns[j].ColumnName.ToString() + ":" + "\"" + dt.Rows[i][j].ToString() + "\"");
}
}
/**/
/*end Of String*/
if (i == dt.Rows.Count - 1)
{
JsonString.Append("} ");
}
else
{
JsonString.Append("}, ");
}
}
JsonString.Append("]");
return JsonString.ToString();
}
else
{
return null;
}
}

}

4、products.ashx
public class products : IHttpHandler
{

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "application/json";
context.Response.Write(getProducts());
}
private string getProducts()
{
string re = JsonHelper.ConvertDataTableToJson(DBHelper.GetTable());
return re;
}
public bool IsReusable
{
get
{
return false;
}
}
}

先谢谢各位了
...全文
1982 16 打赏 收藏 转发到动态 举报
写回复
用AI写文章
16 条回复
切换为时间正序
请发表友善的回复…
发表回复
ycagri 2010-11-18
  • 打赏
  • 举报
回复
可以动态的通过汉字得到拼音

其实最简单的就是在数据表中增加一列拼音列
xbsmile 2010-11-18
  • 打赏
  • 举报
回复
感觉好难懂哦,我现在网站要用一个首字母搜索的,无从下手
额 没人救, 只能自救了
xbsmile 2010-11-18
  • 打赏
  • 举报
回复
感觉好难懂哦,我现在网站要用一个首字母搜索的,无从下手
额 没人救, 只能自救了
柯柯 2010-09-20
  • 打赏
  • 举报
回复
忘了最重要的一步:
在方法:function matchSubset(s, sub) {
的第一行增加判断中文:
//isChinese是判断是否为中文,是就转化为拼音
if (isChinese(s)) s = getSpell(s);
柯柯 2010-09-19
  • 打赏
  • 举报
回复

借助现有的汉字转拼音的js文件,很容易就实现(autocompleteArray)的按拼音查找!!

如下:
1. 在 if( options.data != null ){ 下声明:
var stMatchSetsPy = {};
2.在 stMatchSets[sFirstChar].push(row); 下增加:
if (typeof(getSpell) == "function") //getSpell是转换拼音的方法
var _py = getSpell(sFirstChar).toLowerCase();
if( !stMatchSetsPy[_py] ) stMatchSetsPy[_py] = [];
stMatchSetsPy[_py].push(row);
}
3.在for( var k in stMatchSets ){ ... } 后面增加:
for( var k in stMatchSetsPy ){
options.cacheLength++;
addToCache(k, stMatchSetsPy[k]);
}

就这三步,就实现了autocompleteArray方法的拼音支出!!!!!
ajax没试过!!
myhope88 2010-08-04
  • 打赏
  • 举报
回复
路过,来学习下
porschev 2010-08-04
  • 打赏
  • 举报
回复
看看。。。。
rain_dreaming 2010-08-03
  • 打赏
  • 举报
回复
我也想跟你学学怎么实现你说的功能,能说得清楚些吗
ycmail 2010-07-24
  • 打赏
  • 举报
回复
楼上有什么问题吗 ?
kkbac 2010-07-24
  • 打赏
  • 举报
回复
[Quote=引用 3 楼 yuchen_0515 的回复:]

呵呵 解决了 自己采用了一种笨办法 和大家分享下


autocomplete 用户输入的内容在哪些数据项里面搜索

我通过
#region 提取基站名称首字母
public DataTable GetStationInfo(DataTable dtInfo)
{
DataTable dt = new Dat……
[/Quote]

mark
flyerwing 2010-07-24
  • 打赏
  • 举报
回复
呵呵!
ycmail 2010-07-24
  • 打赏
  • 举报
回复
呵呵 解决了 自己采用了一种笨办法 和大家分享下


autocomplete 用户输入的内容在哪些数据项里面搜索

我通过
#region 提取基站名称首字母
public DataTable GetStationInfo(DataTable dtInfo)
{
DataTable dt = new DataTable();
dt.Columns.Add("StationID", typeof(int));
dt.Columns.Add("StationName", typeof(string));
dt.Columns.Add("AreaName", typeof(string));
dt.Columns.Add("TypeName", typeof(string));
dt.Columns.Add("ManStationID", typeof(decimal));
dt.Columns.Add("ManStationName", typeof(string));
dt.Columns.Add("Spell", typeof(string));

foreach (DataRow dr in dtInfo.Rows)
{
DataRow row = dt.NewRow();
row["StationID"] = dr["StationID"].ToString();
row["StationName"] = dr["StationName"].ToString();
row["AreaName"] = dr["AreaName"].ToString();
row["TypeName"] = dr["TypeName"].ToString();
row["ManStationID"] = dr["ManStationID"].ToString();
row["ManStationName"] = dr["ManStationName"].ToString();
row["Spell"] = GetChineseSpell(dr["StationName"].ToString());
dt.Rows.Add(row);
}
return dt;
}

private string GetChineseSpell(string strText)
{
int len = strText.Length;
string myStr = "";
for (int i = 0; i < len; i++)
{
myStr += getSpell(strText.Substring(i, 1));
}
return myStr;
}


private string getSpell(string cnChar)
{
byte[] arrCN = Encoding.Default.GetBytes(cnChar);
if (arrCN.Length > 1)
{
int area = (short)arrCN[0];
int pos = (short)arrCN[1];
int code = (area << 8) + pos;
int[] areacode = { 45217, 45253, 45761, 46318, 46826, 47010, 47297, 47614, 48119, 48119, 49062, 49324, 49896, 50371, 50614, 50622, 50906, 51387, 51446, 52218, 52698, 52698, 52698, 52980, 53689, 54481 };
for (int i = 0; i < 26; i++)
{
int max = 55290;
if (i != 25) max = areacode[i + 1];
if (areacode[i] <= code && code < max)
{
return Encoding.Default.GetString(new byte[] { (byte)(65 + i) }).ToLower();
}
}
return "*";
}
else
return cnChar;
}
#endregion

用户输入的内容在我的数据项里面搜索 ,希望有深入了解autocomplete 的朋友们给出更好的答案
白云任去留 2010-07-12
  • 打赏
  • 举报
回复
看看...
wuyq11 2010-07-12
  • 打赏
  • 举报
回复
项目中有一个城市导航,导航上有一个城市搜索,即用户输入城市名、或拼音即可有匹配的提示,方便用户选择。于是乎下载了一个jquery.autocomplete-1.1.3,但引用到项目后,发现几个问题,并相应做了修改: 1.中文输入后,服务端不能正常获取ajax提交的数据(此处,当然可以用相应转码,本人试了n种方便仍改),细看代码发现, 是用 $.get(this.serviceUrl, me.options.params, function(txt) { me.processResponse(txt); }, 'text'); 提交的, 于是改成了我熟悉的提交方式。 $.ajax({url:this.serviceUrl,data:"query="+me.options.params.query,timeout: 5000,success: function(o){me.processResponse(o);}}); 问题立即解决。 猜想,是默认utf-8编码与我服务端过滤器中转码以及代码的转码发生了冲突。 2.当输入框值发生变化时,onchange事件不灵敏。 于是,添加了一个函数,输入值一但onchange就调用 。 onKeyProcessDefult: function(i) { var me, fn, s, d; me = this; s = me.suggestions[i]; d = me.data[i]; if(this.currentValue!=s || undefined==d){d="";s="";} this.selectedIndex=0; //输入时,一但有匹配的项,就默认选择第一项,这样,再按回车键,即可直接submit提交 jht添加 2011-07-20 $(".auto_selected_val").val(d); } 3. 当输入正确值,而不去选择相应提示项时,按回车键,不能完成自动提交。另外就是,当输入正确值,而不去选择相应提示项进,点击后面的提交按钮,也不能完成提交。(赶集网的城市切换也有这个小瑕疵哦)。 于是修改为,一但输入后只有可匹配的项时,就默认选中第一项(代码如上)。 这样,再提交就不是问题了。 4.输入值,当没有相应匹配项时,没有任何提示,不友好,影响用户体验。 5.服务服端注意返回json格式参数格试哦{ query:'c',suggestions:['北京','保定','包头','本溪'],data:['hr','cu','cy','cz'] } 项目应用实例:http://www.juyuan.com/members/city 参考实案例:http://www.ganji.com/index.htm

62,074

社区成员

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见,支持健康理性的辩论和互动,反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧