jQuery 自动完成和 ASP.NET

问题描述

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

I searched all over this site and the web for a good and simple example of autocomplete using jQuery and ASP.NET. I wanted to expose the data used by autocomplete with a webservice (and will probably do that next). In the meantime, I got this working, but it seems a little hacky...

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

In my page I have a text box:

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

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

I am using jQuery autocomplete, set up per their example:

<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>

这是它开始变得笨拙的地方...我调用的是页面而不是网络服务:

Here is where it starts to get hacky... I call a page instead of a webservice:

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

在页面中，我去掉了所有的 html 并保留了这个(否则，自动完成下拉列表中会显示各种 HTML 位):

In the page I stripped out ALL of the html and just have this (otherwise, various HTML bits show up in the autocomplete dropdown):

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

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

And in my autocompletetagdata.aspx, I am using SubSonic to query, format and return data from the database (one data item per line):

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

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

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

If you don't do a LIKE query, then it returns everything that contains a match for the character(s) you type -- e.g., typing "a" will include "Ask" and "Answer" as well as "March" and "Mega." I just wanted it to do a starts with match.

不管怎样，它确实有效，而且设置起来也很容易，但有没有更好的方法?

Anyway, it works and it's pretty easy to set up, but is there a better way?

推荐答案

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

I just recently implemented autocomplete, and it looks fairly similar. I'm using an ashx (Generic Handler) instead of the aspx, but it's basically the same code in the code behind.

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

Using the ashx, it'll look something like this:

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

这篇关于jQuery 自动完成和 ASP.NET的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！