Jquery AutoComplete Plugin Use

Easy to implement similar Baidu input box Lenovo function:

AutoComplete is a powerful plug-in that is based on jquery and can be downloaded to the latest version on the jquery website. First, the jquery UI is jquery-based, so you must first refer to the jquery Script library in your page and then reference the jquery UI library, for the jquery UI library, you can refer to the entire library, or just the library that the current page uses. The following files can be introduced directly when using 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

or directly into the aggregation file:

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

Demo Html:

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

Javascript:

//Local Data$(function () {varAvailabletags = ["ActionScript","AppleScript","Asp","BASIC",C,"C + +","Clojure","COBOL","ColdFusion","Erlang","Fortran","Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP","Python","Ruby","Scala","Scheme"];//this uses an array as the data source, and Availabletags is the name of the array.$ ("#tags"). AutoComplete ({source:availabletags});});/************* Remote Data ***************/$("#autocomplete"). AutoComplete ({Source:function(Request, Response) {$.post ("Server-side address", {Q: $ ("#autocomplete"). Val (), D:NewDate (). GetTime (), R:math.random ()},function(data) {varRedate =data.redate; if(!data.result) Redate= [{Name: "No Data", 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); }          });

The server side is roughly the following, returning the JSON data:

 Public Jsonresult Getdevelopersbykeyword (string  q) {   var list = BLL. Getuserlist (q);    return Json (new {result = list. Any (), redate = list}, Jsonrequestbehavior.allowget);}

/*********** a remote data source with a cache (each request for the same data) ****************/$(function () {    varurl = "Servicehandler.ashx"; varCache ={}, LASTXHR; $("#auto"). AutoComplete ({minLength:2, Source:function(Request, response) {varterm =Request.term; if(terminchcache)                {response (cache[term]); return; } lastxhr= $.getjson (URL, request,function(data, status, XHR) {Cache[term]=data; if(XHR = = =lastxhr)                {Response (data);        }            }); }    });});

Jquery AutoComplete Plugin Use