JQuery文本框自动完成，通过AJAX调用ASP.NET WebService

转自：http://www.wyjexplorer.cn/Blog/View/8DBEA52E59C7021D.html

最近在搞博客搜索框的自动完成功能，用的是JQuery UI里的autocomplete插件。插件的数据源是用AJAX调用一个WebService，网站后台有个标签库，WebService返回的是符合条件的标签。最终效果如下：

我们先来看WebService的代码，方法很简单：

1[WebMethod]
2public List<EdiBlog.Core.DataModel.TagCloud> GetAllTagsForAutoComplete(string tagName)
3{
4    return optTag.GetModelList().Where(p => p.Name.ToLower().StartsWith(tagName.ToLower())).ToList();
5}

这个方法的作用是根据输入的内容，检索所有以tagName开头的标签。我没有返回全部标签，是因为autocomplete插件的默认行为不符合我的需求。在默认情况下，如果我输入“as”，则"ascx"和"javascript"都会被显示。所以我做的这个WebService进行了一定的处理，只返回StartsWith关键词的标签。

这个TagCloud类型很简单，仅仅只有2个属性。一个是Name，表示名称，另一个是Count，表示出现次数。这里我们只需要Name。

1public class TagCloud
2{
3    public string Name { get; set; }
4    public int Count { get; set; }
5}

另外，别忘了把“[System.Web.Script.Services.ScriptService] ”取消注释。不然脚本调用不了WebService。

我们再来看看脚本和HTML部分。

需要引用的除了JQuery库，还要JQuery UI库，我用的版本是“jquery-ui-1.8.16.custom.min.js”。

HTML代码（ASPX）：

`1`	`<asp:TextBox` `ID="txtSearch"` `CssClass="searchtext"` `MaxLength="30"` `runat="server"` `ToolTip="Search"></asp:TextBox>`

它最后表现在网页上，是一个input type="text"的搜索框。

JQuery代码：

01$(function () {
02    $(".searchtext").autocomplete({
03        source: function (request, response) {
04            $.ajax({
05                url: "/API/BlogService.asmx/GetAllTagsForAutoComplete",
06                data: "{ 'tagName': '" + request.term + "'}",
07                dataType: "json",
08                type: "POST",
09                contentType: "application/json; charset=utf-8",
10                dataFilter: function (data) {
11                    return data;
12                },
13                success: function (data) {
14                    response($.map(data.d, function (item) {
15                        return {
16                            value: item.Name
17                        }
18                    }))
19                },
20                error: function (XMLHttpRequest, textStatus, errorThrown) {
21                    alert(textStatus + ": " + errorThrown);
22                }
23            })
24        },
25        minLength: 1
26    });
27});

这段代码里，

data: "{ 'tagName': '" + request.term + "'}"

是给GetAllTagsForAutoComplete方法传参数，参数是用户输入的内容。

`1`	`minLength: 1`

表示至少输入一个字符时，开始自动完成。

`1`	`value: item.Name`

是访问Name属性，这个Name就是TagCloud类型里的Name，因为被解析成了JSON，我们可以直接用"."来访问，不用["Name"]去访问了。

如果你没有引用JQuery UI的CSS库，可以自己做一些样式，比如本人博客的：

01ul.ui-autocomplete
02{
03    border: 1px solid #DDD;
04    background-color: #FFF;
05    width: 280px;
06}
07 
08ul.ui-autocomplete li a
09{
10    padding: 5px;
11    display: block;
12}
13 
14.ui-state-hover
15{
16    background-color: #D8DFEA;
17}

posted @ 2012-06-04 10:22 therockthe 阅读(217) 评论(0) 收藏举报

刷新页面返回顶部

JQuery文本框自动完成，通过AJAX调用ASP.NET WebService

公告