Jquery autocomplete 插件使用

輕鬆實現相似百度輸入框聯想功能：

 

autocomplete 是一個很厲害的插件，該插件基於jquery，在jquery官網能下載到最新版本。 首先，jQuery UI 是基於 jQuery 的，因此，必須在你的頁面中首先引用 jQuery 腳本庫，而後再引用 jQuery UI 庫，對於 jQuery UI 庫來講，能夠引用整個的庫，也能夠僅僅引用當前頁面用到的庫。 使用autocomplete 時能夠直接引入如下文件：

---

• jquery-1.9.1.min.js
• jquery.ui.autocomplete.js
• jquery.ui.core.js
• jquery.ui.position.js
• jquery.ui.widget.js
• jquery.ui.menu.js

或直接引入聚合文件：

---

• jquery-1.9.1.min.js
• jquery-ui-1.10.3.custom.min.js
• jquery-ui-1.10.3.custom.min.css

demo Html：

---

<input id="autocomplete" type="text" />

javascript：

//本地數據
$(function () {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
// 這裏使用數組做爲數據源，availableTags 是數組的名稱
$("#tags").autocomplete({
source: availableTags
});
});
/*************遠程數據***************/
$("#autocomplete").autocomplete({

source: function (request, response) {

                    $.post("服務端地址",{ q: $("#autocomplete").val(), d: new Date().getTime(), r: Math.random() }, function(data)                     {
                    var redate = data.redate;
                    if (!data.result)
                    redate = [{ Name: "無數據", Id: "-1" }];
                    response($.map(redate, function (item) {
                    return {
                              label: item.Name,
                              value: item.Name,
                              id:item.Id
                              };
                    }));
               });
          },
          minLength: 1,
          select: function (event, ui) {
                    alert("id=" + ui.item.id);
                    }
          });

//服務端大體以下，返回json數據:

public JsonResult GetDevelopersByKeyWord(string q)
{
   var list = bll.GetUserList(q);
   return Json(new { result = list.Any(), redate = list }, JsonRequestBehavior.AllowGet);
}

/***********帶有緩存的遠程數據源(每次請求獲取相同的數據)****************/
$(function () {
    var url = "serviceHandler.ashx";
    var cache = {}, lastXhr;
    $("#auto").autocomplete({
        minLength: 2,
        source: function (request, response) {
            var term = request.term;
            if (term in cache) {
                response(cache[term]);
                return;
            }

            lastXhr = $.getJSON(url, request, function (data, status, xhr) {
                cache[term] = data;
                if (xhr === lastXhr) {
                    response(data);
                }
            });
        }
    });
}
);