autocomplete.js可以实现自动输入文本值,并出现下拉框
js引用:所需要的autocomplete文件需要在网站中自行下载。
<!--自动输入文本值所需的jquery文件--> <script src="../js/autocomplete/lib/jquery.js" type="text/javascript"></script> <script src="../js/autocomplete/lib/jquery.bgiframe.min.js" type="text/javascript"></script> <script src="../js/autocomplete/jquery.autocomplete.js" type="text/javascript"></script> <link href="../js/autocomplete/jquery.autocomplete.css" rel="stylesheet" type="text/css" /> <script src="../js/autocomplete/lib/jquery.dimensions.js" type="text/javascript"></script>
Html语句:
<div>目的地:<asp:TextBox ID="TextBox_City" style="padding-left:5px;height:25px;550px;line-height:18px;font-size:12px;" runat="server"></asp:TextBox> </div>
js语句:可是实现多个的选择
<script language="javascript" type="text/javascript"> $(document).ready(function(){ $("#TextBox_City").autocomplete("../GoldenPalmInsurance/Code/CountryName.ashx",{ minChars: 1, //最少输入字条 max: 30, autoFill: false, //是否选多个,用","分开 mustMatch: false, //是否全匹配, 如数据中没有此数据,将无法输入 matchContains: true, //是否全文搜索,否则只是前面作为标准 331, multiple: true, scrollHeight: 200//提示高度,溢出时显示滚动条 }); }); </script>
CountryName.ashx文件中程序如下:
public void ProcessRequest(HttpContext context) { context.Response.ContentType = "application/json"; //取得TextBox的文字 string q = context.Request.QueryString["q"] == null ? "" : context.Request.QueryString["q"].ToString(); if (!string.IsNullOrEmpty(q)) { //LINQ查询 using (QuDataDataContext Qucontext=new QuDataDataContext()) { var Query = from a in Qucontext.countryinfos where a.cname.Contains(q) || a.ename.Contains(q) orderby a.ename select a.cname+'/'+a.ename; string json = "申根/schengen state" + Environment.NewLine + string.Join(Environment.NewLine, Query.ToArray()); //將查詢結果輸出 context.Response.Write(json); } } }