C#中使用JQueryUI中Autocomplete插件
服务器端后台代码：
1 private string GetModelNames() {
2 return @"[
3 {
4 'value': 'jquery',
5 'label': 'jQuery',
6 'desc': 'the write less, do more, JavaScript library',
7 },
8 {
9 'value': 'jquery-ui',
10 'label': 'jQuery UI',
11 'desc': 'the official user interface library for jQuery',
12 },
13 {
14 'value': 'sizzlejs',
15 'label': 'Sizzle JS',
16 'desc': 'a pure-JavaScript CSS selector engine',
17 }
18 ]".Replace("'", "\"");
19 }
第一种方式：动态数据源
Aspx页面代码：
1 $("#ModelName2").autocomplete({ 2 minLength: 0, 3 source:function( request, response ) { 4 $.ajax({ 5 url: "SystemAjaxData.ashx?selectType=getModelNames", 6 success: function (data) { 7 var jsonData = eval("(" + data + ")"); 8 response(jsonData); 9 } 10 }); 11 }, 12 focus: function (event, ui) { 13 $("#ModelName2").val(ui.item.label); 14 return false; 15 }, 16 select: function (event, ui) { 17 $("#ModelName2").val(ui.item.label); 18 $("#ModelNameValue2").val(ui.item.value); 19 20 return false; 21 } 22 });
由于Ajax返回的是字符串，因此必须用eval方法转换成Json对象再返回给Autocomplete插件使用。
第二种方式：固定数据源方式，并且动态改变下拉选择框样式
1 var projects = [ 2 { 3 value: "jquery", 4 label: "jQuery", 5 desc: "the write less, do more, JavaScript library", 6 icon: "jquery_32x32.png" 7 }, 8 { 9 value: "jquery-ui", 10 label: "jQuery UI", 11 desc: "the official user interface library for jQuery", 12 icon: "jqueryui_32x32.png" 13 }, 14 { 15 value: "sizzlejs", 16 label: "Sizzle JS", 17 desc: "a pure-JavaScript CSS selector engine", 18 icon: "sizzlejs_32x32.png" 19 } 20 ]; 21 22 $("#ModelName2").autocomplete({ 23 minLength: 0, 24 source:projects, 25 focus: function (event, ui) { 26 $("#ModelName2").val(ui.item.label); 27 return false; 28 }, 29 select: function (event, ui) { 30 $("#ModelName2").val(ui.item.label); 31 $("#ModelNameValue2").val(ui.item.value); 32 33 return false; 34 } 35 }) 36 .autocomplete("instance")._renderItem = function (ul, item) { 38 return $("<li>") 39 .append("<a>" + item.label + "<br>" + item.desc + "</a>") 40 .appendTo(ul); 41 };
第三种方式：缓存后台数据源
1 var cache = {}; 2 $("#ModelName2").autocomplete({ 3 minLength: 0, 4 source: function( request, response ) { 5 var term = request.term; 6 if ( term in cache ) { 7 response( cache[ term ] ); 8 return; 9 } 10 $.ajax({ 11 url: "SystemAjaxData.ashx?selectType=getModelNames", 12 success: function (data) { 13 var jsonData = eval("(" + data + ")"); 14 cache[ term ]=jsonData; 15 response(jsonData); 16 } 17 }); 18 }, 19 focus: function (event, ui) { 20 $("#ModelName2").val(ui.item.label); 21 return false; 22 }, 23 select: function (event, ui) { 24 $("#ModelName2").val(ui.item.label); 25 $("#ModelNameValue2").val(ui.item.value); 26 27 return false; 28 } 29 });
