function GetJobTitle(obj) { $(obj).autocomplete("GetJobTitle.ashx", { max: 12, //列表里的条目数 minChars: 0, //自动完成激活之前填入的最小字符 width: 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="" οnkeyup="GetJobTitle(this);" style="width: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>