jquery autocomplete 自動補全

寫在前面

　　autocomplete是jqueryUI裏的一個插件

　　效果和說明能夠訪問這裏，做用相似於搜索時的自動提示：

      相信用過jQuery autocomplete 自動補全功能同窗有很多，可是每每咱們所對應的需求不一樣，有的僅僅是爲了省事，敲兩個字就有一堆可供選擇的信息可供選擇，但並非全部需求都是這樣的，咱們還有這樣的需求，敲兩個字，將這個文字對應的實體綁定出來。

主要的參數

jQuery UI Autocomplete經常使用的參數有：

1. Source：用於指定數據來源，類型爲String、Array、Function
   1. String：用於ajax請求的服務器端地址，返回Array/JSON格式
   2. Array：即字符串數組 或 JSON數組
   3. Function(request, response)：經過request.term得到輸入的值，response([Array])來呈現數據；(JSONP是這種方式)
2. minLength：當輸入框內字符串長度達到minLength時，激活Autocomplete
3. autoFocus：當Autocomplete選擇菜單彈出時，自動選中第一個
4. delay：即延遲多少毫秒激活Autocomplete

其餘不經常使用的就不羅列了。

須要引用的文件

   <link href="/Content/jquery.autocomplete.css" rel="stylesheet" type="text/css" />

　　<script type="text/javascript" src="/Scripts/jquery.autocomplete.js"></script>
    <script type="text/javascript">
        function initAutoComplete(json) {
            $("#inputxt").autocomplete(json, {
                minChars: 1,
                width: 260,
                dataType: "json",
                matchContains: true,
                formatItem: function (row, i, max) {
                    return row.id + " <" + row.title + ">";
                },
                formatMatch: function (row, i, max) {
                    return row.title;
                },
                formatResult: function (row) {
                    return row.title;
                }

            }).result(function (event, row, formatted) {
                $("#newid").val(row.id);
            }); ;
        }
        $(document).ready(function () {
            $("#inputxt").focus(function () {
                $.post("/ashx/AccessDate.ashx", {}, function (data) {
                    initAutoComplete(data);
                }, "json");
            });
        });
    </script>

前臺：

<form action="" method="post">
<input type="text" id="inputxt" />
<input type="hidden" id="newid" />
<input type="submit" value="提交"/>
</form>

這些代碼的意思就是在文本框輸入搜索文字後，智能提示出對應的列表以及列表所對應的ID，選擇某一條後，將ID賦值給隱藏域,這樣提交表單的時候就能夠將文本框內容與ID

一塊兒提交。

後臺：

　　　　　　　JavaScriptSerializer jss = new JavaScriptSerializer();
            Dictionary<string, string> drow = new Dictionary<string, string>();
            List<Dictionary<string, object>> gas = new List<Dictionary<string, object>>();
            string start = System.Web.HttpUtility.UrlDecode(context.Request["start"], Encoding.UTF8);

            string end = System.Web.HttpUtility.UrlDecode(context.Request["end"], Encoding.UTF8);
            SqlConnection con = new SqlConnection(SqlHelper.sqlCon);
            SqlDataAdapter da = new SqlDataAdapter("SELECT   ID, Title, start, [end], UserID, fullname, confname, confshortname, allDay, topic, [description]  FROM  Userdate ", con);
            DataSet ds = new DataSet();
            da.Fill(ds);
            con.Close();
            for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
            {
                Dictionary<string, object> drow2 = new Dictionary<string, object>();
                drow2.Add("id", ds.Tables[0].Rows[i]["ID"].ToString());
                drow2.Add("title", ds.Tables[0].Rows[i]["Title"].ToString());
                gas.Add(drow2);
            }
            context.Response.Write(jss.Serialize(gas)); 

　　

效果就是這樣了，下面把所需文件奉上

點擊下載