在WebForms和MVC中实现AutoComplete

  
   代码如下
1. <asp:TextBox ID="txtLearnCenter" runat="server" Width="188px"></asp:TextBox>
2.                     <cc1:AutoCompleteExtender ID="txtLearnCenter_AutoCompleteExtender" runat="server"
3.                         DelimiterCharacters="" Enabled="True" ServicePath="~/WebService/PymService.asmx"
4.                         ServiceMethod="GetLearnCenterByPym" MinimumPrefixLength="1" CompletionSetCount="15"
5.                         TargetControlID="txtLearnCenter" CompletionListHighlightedItemCssClass="autocomplete_highlightedlistitem"
6.                         CompletionListCssClass="autocomplete_completionlistelement" CompletionListItemCssClass="autocomplete_listitem">
7.                     </cc1:AutoCompleteExtender>
具体的属性是什么意思，大家自己看看就明白了。我只介绍这个ServicePath和ServiceMethod，ServicePath就是web服务地址，可以相对或者绝对，ServiceMethod就是web服务提供的方法。
1. public class PymService : System.Web.Services.WebService 
2.     { 
3.         [WebMethod] 
4.         public string[] GetProfessionalByPym(string prefixText, int count) 
5.         { 
6.             return new Common().GetProfessionalNameByPym(prefixText, count); 
7.         } 
8. 
9.         [WebMethod] 
10.         public string[] GetLearnCenterByPym(string prefixText, int count) 
11.         { 
12.             return new Common().GetLearnCenterByPym(prefixText, count); 
13.         } 
14. 
15.         [WebMethod] 
16.         public string[] GetStudentNameByPym(string prefixText, int count) 
17.         { 
18.             return new Common().GetStuNameByPym(prefixText, count); 
19.         } 
20.     }
注意，参数必须是prefixText和count。
下面我们再看看如何在mvc中实现，这里需要使用jquery插件jquery.autocomplete.js。代码如下
1. jQuery("#courseName").autocomplete("/TaskScoreEnter/GetCourseByPym/", { 
2.        minChars: 0, //最小响应的字符数 
3.        max: 10, //返回数据的最大条数 www.zzzyk.com  
4.        autoFill: false, 
5.        delay: 400, 
6.        matchContains: true, 
7.        scrollHeight: 220, 
8.        dataType: 'json', 
9.        selectFirst: false, 
10.        parse: function (data) { 
11.            var rows = []; 
12.            if (data == null) { 
13.                return rows; 
14.            } 
15.            for (var i = 0; i < data.rows.length; i++) { 
16.                rows[rows.length] = { 
17.                    data: data.rows[i].name, 
18.                    value: data.rows[i].course_id, 
19.                    result: data.rows[i].name 
20.                }; 
21.            } 
22.            return rows; 
23.        }, 
24.        formatItem: function (row, i, max) { 
25.            return row; 
26.        }, 
27.        formatMatch: function (row, i, max) { 
28.            return row; 
29.        }, 
30.        formatResult: function (row) { 
31.            return row; 
32.        } 
33.    }).result(function (event, data, formatted) { 
34.        if (formatted == "") { 
35.            $("#courseName").val(""); 
36.            $("#hfd_course_id").val(""); 
37.            $("#courseName").focus(); 
38.            alert("请准确选择", "提示信息"); 
39.        } 
40.        else { 
41.            $("#hfd_course_id").val(formatted); 
42.        } 
43.  

补充：Web开发 , 其他 ,

上一个：列收藏夹URL及快捷方式地址VBS
下一个：xml详解