jQuery 自动完成和 ASP.NET

Question

我在整个网站和网络上搜索了一个使用 jQuery 和 ASP.NET 的良好且简单的自动完成示例。我想通过 web 服务公开自动完成使用的数据（接下来可能会这样做）。与此同时，我得到了这个工作，但它似乎有点 hacky...

在我的页面中，我有一个文本框：

<input id="txtSearch" type="text" />

我正在使用 jQuery 自动完成功能，按照他们的示例进行设置：

<link rel="stylesheet" href="js/jquery.autocomplete.css" type="text/css" />
<script type="text/javascript" src="js/jquery.bgiframe.js"></script>
<script type="text/javascript" src="js/jquery.dimensions.pack.js"></script>
<script type="text/javascript" src="js/jquery.autocomplete.js"></script>

这里是它开始变得棘手的地方......我调用一个页面而不是一个网络服务：

  <script type="text/javascript">
    $(document).ready(function(){
        $("#txtSearch").autocomplete('autocompletetagdata.aspx');
    });      
  </script>

在页面中，我删除了所有的 html，只保留了这个（否则，自动完成下拉菜单中会显示各种 HTML 位）：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="autocompletetagdata.aspx.cs" Inherits="autocompletetagdata" %>

在我的 autocompletetagdata.aspx 中，我使用 SubSonic 从数据库中查询、格式化和返回数据（每行一个数据项）：

protected void Page_Load(object sender, EventArgs e)
{
    // Note the query strings passed by jquery autocomplete:
    //QueryString: {q=a&limit=150&timestamp=1227198175320}

    LookupTagCollection tags = Select.AllColumnsFrom<LookupTag>()
        .Top(Request.QueryString["limit"])
        .Where(LookupTag.Columns.TagDescription).Like(Request.QueryString["q"] + "%")
        .OrderAsc(LookupTag.Columns.TagDescription)
        .ExecuteAsCollection<LookupTagCollection>();

    StringBuilder sb = new StringBuilder();

    foreach (LookupTag tag in tags)
    {
        sb.Append(tag.TagDescription).Append("\n");
    }

    Response.Write(sb.ToString());
}

如果您不执行 LIKE 查询，则它会返回包含与您键入的字符匹配的所有内容 - 例如，键入“a”将包括“Ask”和“Answer”以及“三月”和“超级”。我只是想让它从匹配开始。

无论如何，它可以工作，而且设置起来很容易，但是有没有更好的方法？

Answer 1

我最近刚刚实现了自动完成功能，它看起来非常相似。我使用的是 ashx（通用处理程序）而不是 aspx，但它与后面的代码中的代码基本相同。

使用 ashx，它看起来像这样：

<script type="text/javascript">
  $(document).ready(function(){
      $("#txtSearch").autocomplete('autocompletetagdata.ashx');
  });      
</script>

[WebService(Namespace = "http://www.yoursite.com/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class AutocompleteTagData : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        // Note the query strings passed by jquery autocomplete:
        //QueryString: {q=a&limit=150&timestamp=1227198175320}

        LookupTagCollection tags = Select.AllColumnsFrom<LookupTag>()
            .Top(context.Request.QueryString["limit"])
            .Where(LookupTag.Columns.TagDescription).Like(context.Request.QueryString["q"] + "%")
            .OrderAsc(LookupTag.Columns.TagDescription)
            .ExecuteAsCollection<LookupTagCollection>();

        foreach (LookupTag tag in tags)
        {
            context.Response.Write(tag.TagDescription + Environment.NewLine);
        }
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

Answer 2

我刚刚在另一个问题上发布了这个，但是您可以覆盖 jQuery 自动完成插件上的解析函数以使其支持任何输出。

例子：

    $("#<%= TextBox1.ClientID %>").autocomplete("/Demo/WebSvc.asmx/SuggestCustomers", {
        parse: function(data) {
            var parsed = [];

            $(data).find("string").each(function() {
                parsed[parsed.length] = {
                    data: [$(this).text()],
                    value: $(this).text(),
                    result: [$(this).text()]
                };
            });
            return parsed;
        },
        dataType: "xml"
    });

所有这一切都是 XML 的字符串数组...很容易做到...如果您使用 SubSonic，您应该查看 RESTHandler（它是一个隐藏的 GEM ！！！），它支持您所有的基本查询对象并且可以返回 JSON/XML。这是一个使用它的示例查询...

/Demo/services/Customers/list.xml?CustomerName=JOHN

如果您将 list.xml 更改为 list.json，它会将结果更改为 JSON。上面的请求将返回一个强类型的“客户”实体。您可以更改参数以支持 LIKE、NOT LIKE 等...非常强大，所有管道都已完成...

这是一个视频：http://subsonicproject.com/tips-and-tricks/webcast-using-subsonic-s-rest-handler/

Answer 3

Web 服务或 WCF 服务将为您提供更好的界面。两者都可以设置做Json序列化。

由于我正在学习 WCF 课程（我正在休息，真的！），我将画出 WCF 方法的草图。

[OperationContract]
[WebInvoke(RequestFormat=WebMessageFormat.Json,
           ResponseFormat=WebMessageFormat.Json)]
public LookupTagCollection LookupTags( int limit, string q )
{
     return Select.AllColumnsFrom<LookupTag>()
                  .Top(limit)
                  .Where(LookupTag.Columns.TagDescription)
                  .Like(q+ "%")
                  .OrderAs(LookupTag.Columns.TagDescription)
                  .ExecuteAsCollection<LookupTagCollection>();    
}

LookupTagCollection 需要可序列化。

Answer 4

Jquery 1.8 自动完成使用“term”而不是“q”作为查询字符串参数。这是我实现的简短而甜蜜的版本。希望这对某人有所帮助。

Javascript：

$(function () {
    $("#autocomplete").autocomplete({
        source: "/pathtohandler/handler.ashx",
        minLength: 1,
        select: function (event, ui) {
            $(this).val(ui.item.value);
        }
    });
});

ASHX 处理程序：

public class SearchHandler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        var term = context.Request.QueryString["term"].ToString();

        context.Response.Clear();
        context.Response.ContentType = "application/json";

        var search = //TODO implement select logic based on the term above

        JavaScriptSerializer jsSerializer = new JavaScriptSerializer();
        string json = jsSerializer.Serialize(search);
        context.Response.Write(json);
        context.Response.End();
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}