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