jquery自动补全插件autocomplete.js

autocomplete.js使用方法

　　1.注jQuery引入3.0以下版本

• • <script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
  • <script type="text/javascript" src="../js/jquery.autocomplete.js"></script>
  • <script type="text/javascript" src="../js/jquery.mockjax.js"></script>    

　　2.HTML

<input id="txtname"  type="text" />
<div id="suggestions-container" class="suggestions-container" style="position: relative; float: left; width: 20px; margin: 10px;"></div>

       3.CSS

 body { font-family: sans-serif; font-size: 14px; line-height: 1.6em; margin: 0; padding: 0; }
        .container {
            width: 800px;
            margin: 0 auto;
        }

        .autocomplete-suggestions {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            border: 1px solid #999;
            background: #FFF;
            cursor: default;
            overflow: auto;
            -webkit-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64);
            -moz-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64);
            box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64);
        }

        .autocomplete-suggestion {
            padding: 2px 5px;
            white-space: nowrap;
            overflow: hidden;
        }

        .autocomplete-no-suggestion {
            padding: 2px 5px;
        }

        .autocomplete-selected {
            background: #F0F0F0;
        }

        .autocomplete-suggestions strong {
            font-weight: bold;
            color: #000;
        }

        .autocomplete-group {
            padding: 2px 5px;
        }

        .autocomplete-group strong {
                font-weight: bold;
                font-size: 16px;
                color: #000;
                display: block;
                border-bottom: 1px solid #000;
            }
         

　　4.Ajax

var countriesArray
                $.ajax({
                    url: "",
                    type: "post",
                    success: function (data) {
                        if (data != null) { 
                            var set = $.parseJSON(data)
                            var newObj = [];
                            for (var i = 0; i < set.length; i++) {
                                newObj.push(set[i].Email)
                            }
                            countriesArray = $.map(newObj, function (value, key) { return { value: value, data: key }; });
                            console.log(countriesArray);
                        }
                        if (countriesArray != null) {
                            // 使用自定义的appendTo初始化自动完成
                            $("#txtname").autocomplete({ 
                                lookup: countriesArray,
                                appendTo: '.suggestions-container'
                            });

                        }

                    }
                })

       5.C#

[HttpGet]
        public JsonResult GetData()
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("Email", System.Type.GetType("System.String")); 
            dt.Rows.Add(new object[] { "口水缴费" });
            var json = Newtonsoft.Json.JsonConvert.SerializeObject(dt);  
            return Json(json, JsonRequestBehavior.AllowGet);
        }