标签：
轻松实现类似百度输入框联想功能：
autocomplete 是一个很厉害的插件，该插件基于jquery，在jquery官网能下载到最新版本。 首先，jQuery UI 是基于 jQuery 的，所以，必须在你的页面中首先引用 jQuery 脚本库，然后再引用 jQuery UI 库，对于 jQuery UI 库来说，可以引用整个的库，也可以仅仅引用当前页面用到的库。 使用autocomplete 时可以直接引入以下文件：
或直接引入聚合文件：
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); } }); } }); } );
标签：
原文地址：http://www.cnblogs.com/huhangfei/p/4900452.html
