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页面代码：

               $("#ModelName2").autocomplete({
                minLength: 0,
                source:function( request, response ) {
                    $.ajax({
                        url: "SystemAjaxData.ashx?selectType=getModelNames",
                        success: function (data) {
                            var jsonData = eval("(" + data + ")");
                            response(jsonData);
                        }
                    });
                },
                focus: function (event, ui) {
                    $("#ModelName2").val(ui.item.label);
                    return false;
                },
                select: function (event, ui) {
                    $("#ModelName2").val(ui.item.label);
                    $("#ModelNameValue2").val(ui.item.value);

                    return false;
                }
            });

   由于Ajax返回的是字符串，因此必须用eval方法转换成Json对象再返回给Autocomplete插件使用。

第二种方式：固定数据源方式，并且动态改变下拉选择框样式

     var projects = [
      {
        value: "jquery",
        label: "jQuery",
        desc: "the write less, do more, JavaScript library",
        icon: "jquery_32x32.png"
      },
      {
        value: "jquery-ui",
        label: "jQuery UI",
        desc: "the official user interface library for jQuery",
        icon: "jqueryui_32x32.png"
      },
      {
        value: "sizzlejs",
        label: "Sizzle JS",
        desc: "a pure-JavaScript CSS selector engine",
        icon: "sizzlejs_32x32.png"
      }
    ];

    $("#ModelName2").autocomplete({
                minLength: 0,
                source:projects,
                focus: function (event, ui) {
                    $("#ModelName2").val(ui.item.label);
                    return false;
                },
                select: function (event, ui) {
                    $("#ModelName2").val(ui.item.label);
                    $("#ModelNameValue2").val(ui.item.value);

                    return false;
                }
            })
            .autocomplete("instance")._renderItem = function (ul, item) {
                return $("<li>")
                  .append("<a>" + item.label + "<br>" + item.desc + "</a>")
                  .appendTo(ul);
            };

 第三种方式：缓存后台数据源

var cache = {};
            $("#ModelName2").autocomplete({
                minLength: 0,
                source: function( request, response ) {
                    var term = request.term;
                    if ( term in cache ) {
                        response( cache[ term ] );
                        return;
                    }
                    $.ajax({
                        url: "SystemAjaxData.ashx?selectType=getModelNames",
                        success: function (data) {
                            var jsonData = eval("(" + data + ")");
                            cache[ term ]=jsonData;
                            response(jsonData);
                        }
                    });
                },
                focus: function (event, ui) {
                    $("#ModelName2").val(ui.item.label);
                    return false;
                },
                select: function (event, ui) {
                    $("#ModelName2").val(ui.item.label);
                    $("#ModelNameValue2").val(ui.item.value);

                    return false;
                }
            });