Автозаполнение jQuery и ASP.NET

Я недавно реализовал автозаполнение, и оно выглядит довольно похоже. Я использую 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;
        }
    }
}

Веб-служба или служба 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 должен быть сериализуемым.

Я только что опубликовал это по другому вопросу, но вы можете переопределить функцию синтаксического анализа в подключаемом модуле автозаполнения 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 (это скрытый ДРАГОЦЕННЫЙ КАМЕНЬ !!!), он поддерживает базовые запросы ко всем вашим объектам и может вернуть JSON / XML. Вот пример запроса с его использованием ...

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

Если вы измените list.xml на list.json, он изменит результаты на JSON. Приведенный выше запрос вернет строго типизированную сущность «Клиент». Вы можете изменить параметр, чтобы поддерживать НРАВИТСЯ, НЕ НРАВИТСЯ и т.д ... Очень мощный, и вся сантехника уже сделана ...

Вот видео об этом: http://subsonicproject.com/tips-and-tricks/webcast-using-subsonic-s-rest-handler/

Автозаполнение JQuery 1.8 использует "термин", а не "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;
        }
    }
}