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