Server-Side Backend code:
1 private string getmodelnames () {2 return @ "[3 {4 ' value ': ' jquery ', 5 ' label ': ' jquery ', 6
' desc ': ' The Write less, does more, JavaScript library ', 7 }, 8 {9 ' value ': ' Jquery-ui ', ' label ': ' JQ Uery UI ', one ' desc ': ' The official user interface library for jQuery ', ' },13 {' value ': ' Sizzlejs ', ' label ': ' Sizzle JS ', ' desc ': ' A pure-javascript CSS selector engine ', ' }18 ] '. Replace ("'", "\" ");
First approach: Dynamic Data sources
ASPX page code:
1$("#ModelName2"). AutoComplete ({2MinLength:0,3 source:function (Request, response) {4 $.ajax ({5Url:"Systemajaxdata.ashx?selecttype=getmodelnames",6 success:function (data) {7 varJsondata = eval ("("+ Data +")");8 response (jsondata);9 }Ten }); One }, AFocus:function (Event, UI) { -$("#ModelName2"). Val (Ui.item.label); - return false; the }, - Select: Function (Event, UI) { -$("#ModelName2"). Val (Ui.item.label); -$("#ModelNameValue2"). Val (ui.item.value); + - return false; + } A});
Since Ajax returns a string, it must be converted to a JSON object using the Eval method and returned to the AutoComplete plug-in.
Second way: Fixed data source mode, and dynamically change the dropdown selection box style
1 varProjects = [2 {3Value"jquery",4Label"JQuery",5Desc"The write less, does more , JavaScript library",6Icon"Jquery_32x32.png"7 },8 {9Value"Jquery-ui",TenLabel"jQuery UI", OneDesc"The official user interface library for JQuery", AIcon"Jqueryui_32x32.png" - }, - { theValue"Sizzlejs", -Label"Sizzle JS", -Desc"a pure-javascript CSS selector engine", -Icon"Sizzlejs_32x32.png" + } - ]; + A$("#ModelName2"). AutoComplete ({ atMinLength:0, - Source:projects, -Focus:function (Event, UI) { -$("#ModelName2"). Val (Ui.item.label); - return false; - }, in Select: Function (Event, UI) { -$("#ModelName2"). Val (Ui.item.label); to$("#ModelNameValue2"). Val (ui.item.value); + - return false; the } * }) $. AutoComplete ("instance"). _renderitem =function (UL, item) { - return$("<li>") the. Append ("<a>"+ Item.label +"<br>"+ Item.desc +"</a>") + . APPENDTO (UL); A};
Third Way: Cache background Data sources
1 varCache = {};2$("#ModelName2"). AutoComplete ({3MinLength:0,4 source:function (Request, response) {5 varterm =request.term;6 if(terminchcache) {7 response (cache[term]);8 return;9 }Ten $.ajax ({ OneUrl:"Systemajaxdata.ashx?selecttype=getmodelnames", A success:function (data) { - varJsondata = eval ("("+ Data +")"); -cache[term]=Jsondata; the response (jsondata); - } - }); - }, +Focus:function (Event, UI) { -$("#ModelName2"). Val (Ui.item.label); + return false; A }, at Select: Function (Event, UI) { -$("#ModelName2"). Val (Ui.item.label); -$("#ModelNameValue2"). Val (ui.item.value); - - return false; - } in});
Using the jQueryUI AutoComplete plugin in C #