jquery.autocomplete 根据拼音搜索
目前实现了可以根据汉字、字母搜索
需要实现的是 输入拼音首字母 显示出相应数据
例如 输入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;
}
}
}
先谢谢各位了