function GetJobTitle(obj) {
$(obj).autocomplete("GetJobTitle.ashx", {
max: 12, //列表里的条目数
minChars: 0, //自动完成激活之前填入的最小字符
300, //提示的宽度,溢出隐藏
scrollHeight: 300, //提示的高度,溢出显示滚动条
matchContains: true, //包含匹配,就是data参数里的数据,是否只要包含文本框里的数据就显示
autoFill: false, //自动填充
extraParams: { key: function () { return $(obj).val(); }, key1: function () { return $(obj).val(); } },
parse: function (data) {
return $.map(eval(data), function (row) {
return {
data: row,
value: row.jobid,
result: row.jobTitle
}
}); //对ajax页面传过来的数据进行json转码
},
formatItem: function (row, i, max) {
return row.jobTitle;
},
formatMatch: function (row, i, max) {
return row.jobTitle + row.jobid;
},
formatResult: function (row) {
return row.jobid;
}
}).result(function (event, row, formatted) {
return row.jobid;
});
}
public void ProcessRequest (HttpContext context) { String key = context.Request["key"]; String key1 = context.Request["key1"]; if (context.Request["q"] != null && context.Request["q"] != "") { context.Response.Write(GetLikeJobTitle(context.Request["q"])); } context.Response.Charset = "utf-8"; context.Response.ContentEncoding = System.Text.Encoding.UTF8; context.Response.ContentType = "application/json"; context.Response.End(); } public String GetLikeJobTitle(String key) { String strJson = String.Empty; System.Data.DataSet ds = new DataSet(); using (System.Data.SqlClient.SqlConnection con = new SqlConnection(sqlcon)) { System.Text.StringBuilder strWhere = new StringBuilder("select top 10 jobid,jobTitle from job_job where 1=1"); strWhere.Append(" and PATINDEX('%").Append(key.Trim()).Append("%',jobTitle)>0"); SqlDataAdapter sqlda = new SqlDataAdapter(strWhere.ToString(), con); sqlda.Fill(ds); if (ds.Tables[0].Rows.Count > 0) { strJson = Newtonsoft.Json.JsonConvert.SerializeObject(ds.Tables[0]); } } return strJson; }
<input type="text" value="" onkeyup="GetJobTitle(this);" style="300px;"/>
JS和CSS引用
<script src="Scripts/jquery-1.6.1.min.js" type="text/javascript"></script>
<link href="Scripts/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery.autocomplete.js" type="text/javascript"></script>
<script src="Scripts/Auto_SaerchKey.js" type="text/javascript"></script>