Блог

Главная - Вопросы по программированию - установка текстового поля на метку, а не на значение с помощью автозаполнения jqueryui

установка текстового поля на метку, а не на значение с помощью автозаполнения jqueryui

#jquery #jquery-ui #autocomplete

#jquery #jquery-пользовательский интерфейс #автозаполнение

Вопрос:

Итак, допустим, у меня есть база данных имен и идентификаторов, соответствующих этим именам. Я хочу, чтобы текстовая область (ну input type="text" ) автоматически заполнялась на основе имени, но также заполняла метку, а не значение в текстовой области. Значение, как я полагаю, может быть установлено с помощью скрытого поля ввода.

Как я могу это сделать в jquery?

Вот пример того, что я имею в виду (не работает — не уверен, почему):

http://jsfiddle.net/mMa7d/

Если бы это сработало, в текстовой области были бы заполнены числа, а не имена.

Ответ №1:

Вы можете использовать $.map для получения имен,

 var data = [{
    label: "John Doe",
    value: 6
}, {
    label: "Jane Doe",
    value: 7
}];
$(function () {
    $("#names").autocomplete({
        source: $.map(data, function (value, key) {
            return {
                value: value.label
            };
        })
    });
});

ДЕМОНСТРАЦИЯ

Редактировать

  $("#names").autocomplete({
     source: function (request, response) {
         $.getJSON("your url here", function (data) {
             response($.map(data, function (value, key) {
                 return {
                     value: value.label
                 };
             }));
         });
     }
 });

Комментарии:

1. Что, если источником является URL, а не массив? И есть также вопрос о том, как также заполнить скрытое поле ввода..

2. автозаполнение использует ajax для получения имен / значений. Если бы все, что я хотел сделать, это сделать так, чтобы имена отображались в текстовой области, я мог бы просто вернуть имена. Но это не то, чего я хочу. Я хочу, чтобы имена отображались в текстовой области, но я также хочу, чтобы значение отображалось в скрытой области ввода. Форме, в которую я отправляю, нужен идентификатор, а не имя. Но это упрощает жизнь, если имя может быть автоматически предсказано.

3. Потрясающе — спасибо! Мне пришлось добавить request.term к URL, чтобы возвращать имена на основе того, что было введено, но это достаточно просто. Спасибо!