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

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

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

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

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

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

public class TagCloud
{
    public string Name { get; set; }
    public int Count { get; set; }
}

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

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

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

HTML代码（ASPX）：

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

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

JQuery代码：

$(function () {
    $(".searchtext").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "/API/BlogService.asmx/GetAllTagsForAutoComplete",
                data: "{ 'tagName': '" + request.term + "'}",
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                dataFilter: function (data) {
                    return data;
                },
                success: function (data) {
                    response($.map(data.d, function (item) {
                        return {
                            value: item.Name
                        }
                    }))
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(textStatus + ": " + errorThrown);
                }
            })
        },
        minLength: 1
    });
});

这段代码里，

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

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

minLength: 1

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

value: item.Name

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

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

ul.ui-autocomplete
{
    border: 1px solid #DDD;
    background-color: #FFF;
    width: 280px;
}

ul.ui-autocomplete li a
{
    padding: 5px;
    display: block;
}

.ui-state-hover
{
    background-color: #D8DFEA;
}

Microsoft MVP for Azure