Как выполнить автозаполнение в ASPX только с оригинальным запросом страницы?

Question

Мы разрабатываем страницу ASPX (.NET 2.0), которая включает в себя список выбора со слишком большим количеством элементов (200+).

Нам нужна некоторая форма автозаполнения, чтобы превратить это в нечто, похожее на текстовое поле, но с предложениями автозаполнения.

Мы хотели бы использовать JQuery. До сих пор в нашем поиске были обнаружены только автозаполнения, которые требуют какой-то серверной службы, дополнительных запросов (в AJAX) и т. Д. Мы бы предпочли доставлять все данные одновременно с запросом страницы. В идеале это было бы как отдельные записи списка.

Существуют ли поля автозаполнения, которые преобразуют список выбора? или есть способ подключить автозаполнение к данным, уже находящимся на странице (в ASPX с .NET 2.0), так что ему не нужно будет получать доступ к внешним ресурсам?

Редактировать: Постбэки не были той фразой, которую я искал. Я имею в виду доставлено с оригинальным запросом страницы.

Редактировать 2: страница должна изящно ухудшаться. Многие из решений «внедряют» контент, поэтому без javascript вы не получите никакого контента. Это может быть более 200 вариантов, но, по крайней мере, они будут существовать там. Вот почему преобразование списка выбора является нашим идеалом.

Answer 1

http://docs.jquery.com/Plugins/Autocomplete/autocomplete#url_or_dataoptions

Плагин автозаполнения jquery может принимать данные в виде массива. Если вы создаете массив в файле включения .js, который должен соответствовать вашим требованиям.

Например, посмотрите на демонстрационную страницу - проверьте раздел «Несколько городов (локальный)» и файл localdata.js, который там используется.

Answer 2

Используйте плагин jQuery для автозаполнения , как предложил Стив Уиллкок. Выведите обычный select-box, затем в вашем скрипте замените его текстовым полем и инициализируйте плагин массивом, который вы создадите, если option-elements Таким образом, ваши данные поступают как select:

<select size="1" id="options" name="options">
  <option>Option #1</option>
  <option>Option #2</option>
  <option>Option #3</option>
  <option>Option #4</option>
  <option>Option #5</option>
  <option>Option #6</option>
  <option>Option #7</option>
</select>

... и вы преобразуете его так:

$(function(){
  // execute once the DOM is ready...

  // build array of option texts
  var options = [];
  $("#options option").each(function(){
    options.push($(this).text());
  });

  // build an input field, replace the select with it,
  // and wire up autocomplete.
  $("<input id='options' name='options' type='text'>")
    .replaceAll("#options")
    .autocomplete(options, {autoFill: true});  
});

... нет JS? Нет проблем - у вас все еще есть select.

Answer 3

Ответы здесь были очень полезны, но мы нашли этот плагин после дальнейшего поиска, который работает автоматически непосредственно в списке выбора:

Sexy Combo: http://code.google.com/p/sexy-combo/

Демонстрационная страница: http://phone.witamean.net/sexy-combo/examples/index.html

Это потребует немного меньше работы.

Я хотел задокументировать это для справки других. Спасибо всем за помощь.

Answer 4

Существует ряд сторонних элементов управления (мы используем один из инструментария ComponentArt WebUI), который предоставит вам функцию автозаполнения комбинированного списка.

Вы также можете достичь той же идеи, используя техники AJAX, чтобы избежать полной обратной передачи.