jQuery插件之AutoComplete使用方法
汪才
http://files.cnblogs.com/jianjialin/jquery.autocomplete.js
http://files.cnblogs.com/jianjialin/jquery.autocomplete.css
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
context.Response.Write(getProducts(context));
}
private string getProducts(HttpContext context)
{
string sql = "select * from products";
string re = JsonHelper.ConvertDataTableToJson(SqlHelper.ExecuteDataSet(sql).Tables[0]);
return re;
}
<script type="text/javascript">
/*==========用户自定义方法==========*/
//城市数据
var cityList;
//autocomplete选项
var options = {
minChars: 1,
max: 500,
width: 250,
matchContains: true,
formatItem: function(row, i, max) {//显示出来的项格式
return i + "/" + max + ": /"" + row.ProductID + "/" [" + row.ProductName + "]";
},
formatMatch: function(row, i, max) {
return row.ProductName; //用户输入的内容在哪些数据项里面搜索。例如现在是在productName搜索，若要加上ProductID则为 return row.productID+" "+ row.ProductName;
},
formatResult: function(row) {
return row.ProductName;
}
};
//autocomplete初始化函数
function initAutoComplete(json) {
$("#inputName").autocomplete(json, options);
$("#inputName").result(function(event, data, formatted) {//data 选中的行json对象. formatted是formatMatch返回的值.
$("#inputId").val(data.ProductID);
});
}
/*==========加载时执行的语句==========*/
$(function() {
//加载城市数据, 并在回调函数中用返回的数据初始化autocomplete
$.getJSON("products.ashx", {}, function(json) {
initAutoComplete(json);
})
});
</script>
<link href="jquery.autocomplete.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="ui-widget ui-widget-content ui-corner-all" style="width: 700px; padding: 5px;">
<h3>
Demo. 应用AutoComplete插件 </h3>
<br style="clear: both" />
<div class="formLabel">
<label for="inputName">请输入城市拼音和汉字:</label>
</div>
<div class="formInput">
<input id="inputName" name="inputName" type="text" />
</div>
<br style="clear:both" />
<br style="clear: both" />
<div class="formLabel">
<label for="inputId">城市ID:</label></div>
<div class="formInput">
<input id="inputId" name="inputId" type="text" /></div>
<br style="clear: both" />
<br style="clear: both" />
</div>
</body>
StationAjax.ashx
public class StationAjax : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "application/json";
context.Response.Write(getProducts());
}
private string getProducts()
{
string re = JsonHelper.ConvertDataTableToJson(StationDa.GetTable());
return re;
}
public bool IsReusable
{
get
{
return false;
}
}
}
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;
}
}
类似资料：