jQuery-AJAX для повторного связывания выпадающего списка с результатами хранимой процедуры

У меня есть выпадающий список имен людей, который довольно длинный. Целых 2000 имен. Я хотел бы упростить поиск имени, интересующего пользователя, ограничив раскрывающийся список подмножеством имен за раз. Я сделал это, создав серию из 26 ссылок (A, B, C ... Z), которые вызывают метод в коде, который заполняет выпадающий список только теми именами, которые начинаются с буквы, которую щелкнул пользователь.

Все это работает хорошо, но я хотел бы иметь возможность использовать AJAX для выполнения этого обновления в раскрывающемся списке без обновления страницы. Я хотел бы использовать jQuery для функциональности AJAX, а не ASP.NET AJAX.

Моя проблема в том, что я не уверен, как выполнить хранимую процедуру, а затем "перепривязать" выпадающий список с новым набором данных через jQuery AJAX. Какие-нибудь предложения или ресурсы, которые могли бы предоставить и пример или прохождение? Спасибо.

Источник

2 ответа

Решение

Некоторое направление для вас.

Сначала создайте страницу, веб-сервис или httphandler, который примет ваше сообщение и вернет обратно json.

Обработчик:

public void GetNames(HttpContext context)
{
    context.Response.ContentType = "application/json";
    context.Response.ContentEncoding = Encoding.UTF8;

    var results = DataAccess.GetNames(context.Request["letter"]);

    string json = //encode results to json somehow, json.net for example.

    context.Response.Write(json );
}

Разметка

<ul>
  <li>A</li>
</ul>

<select id="names">
</select>

Скрипт для создания $.post

$(function(){
  $("li").click(function(){
    var letter = $(this).text();
    $.post("SomeUrl/GetNames", {letter: letter}, function(data){
     var $sel = $("#names").empty();
     $.each(data, function(){
       //this assumes the json is an array in the format of {value: 1, name:'joe'}
       $sel.append("<option value='" + this.value + "'>" + this.name+ "</option>");
     });
    }, "json");
  });
});

Это должно быть хорошим описанием того, как выполнить вашу задачу.

Некоторые дополнительные ресурсы.

Источник

Плагин jQuery Autocomplete может быть правильным решением для вас.

Источник
Другие вопросы по тегам