autocomplete.js的使用(1):自动输入时,出现下拉选择框

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);
                }
            }
           
        }
原文地址:https://www.cnblogs.com/ly77461/p/5732961.html