Предоставить пользователям функцию поиска, фильтрующую выпадающий список - PullRequest
Новая
       25

Предоставить пользователям функцию поиска, фильтрующую выпадающий список

0 голосов
/ 30 августа 2009

Я разрабатываю форму ASP.NET для ввода данных. Пользователи должны выбрать клиента из выпадающего списка, который заполнен около 1000 клиентов.

Теперь список клиентов растет, и пользователи просили добавить функцию поиска: они хотели бы ввести часть имени и отфильтровать раскрывающийся список с клиентами, чье имя совпадает. Поэтому, если они наберут «aaa», они захотят видеть только клиентов с «aaa» где-то в их имени.

Я посмотрел на автозаполнение инструментария управления ajax, но оно работает с текстовыми полями, а не с выпадающими списками.

Кто-нибудь может предложить хорошее решение?

Ответы [ 2 ]

1 голос
/ 30 августа 2009

Используйте это тогда в текстовом поле! Конечно, человек, просматривающий выпадающий список, знает имя клиента. На мой взгляд, в этом сценарии мало различий.

Я использую тег jQuery для добавления надстройки в мое приложение MVC, которое работает очень хорошо.

http://remysharp.com/2007/12/28/jquery-tag-suggestion/

Если вы заинтересованы, просто прокомментируйте, и я дам вам код, который я использую.

Если вы действительно хотите использовать раскрывающийся список, у вас может быть текстовое поле и раскрывающийся список на панели обновлений. Когда пользователи вводят текст (и нажимают кнопку), вы можете заполнить раскрывающийся список, используя результаты, отфильтрованные по типам пользователей.

0 голосов
/ 30 августа 2009

Я думаю, что текстовое поле будет предпочтительным для этого. Окно выбора не требует ввода текста, поэтому его фильтрация становится чем-то вроде скрытого трюка (не говоря уже о том, что Firefox все равно сделает это правильно).

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

Я неравнодушен к JQuery, поэтому я бы использовал автозаполнение JQuery - в котором есть параметры конфигурации, требующие совпадения, или если щелкнуть по полю, выпадут все элементы.

Если вы заинтересованы в «прогрессивном улучшении», вам лучше всего использовать как традиционные входные данные выбора (для обеспечения доступности), которые заменяют на текстовое поле автозаполнения, основанное на тех же данных. Что-то вроде: 

<select id="s">
   <option value="foo">Foo</value>
   <option value="bar">Bar</value>
</select>

var d = $('#s OPTION').map(function() {
   return $(this).text();
});

$('#s').hide().append('<input type="text" />')
   .autocomplete(d, {
        mustMatch: true,
        minChars: 0,
        autoFill: true,
        matchContains: false
    })
    .result(function(e, d, f) {
       // Select option for the form to submit
       $('#s').val(d);
    });

Вы также можете оставить выделение видимым - что делает его более гибким, но потенциально более запутанным - и подключить обработчик событий к полю выбора, чтобы обновить текстовое поле, чтобы они оставались синхронизированными.

...