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("> 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);
                }
            });
        }
    });
}
);

Jquery autocomplete 插件使用

相关推荐