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;width: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,            //是否全文搜索,否则只是前面作为标准
                width: 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);
                }
            }
           
        }