jqueryUI автозаполнение с дополнительными данными? - PullRequest
Новая
       15

jqueryUI автозаполнение с дополнительными данными?

4 голосов
/ 03 мая 2011

Использование jQueryUI Autocomplete

Я бы хотел добавить некоторые другие данные в список результатов из коробки.Например, мой набор данных может выглядеть так: 

[
    {
        "name": "John's wild bacon emporium",
        "code": "BACON"
    },
    {
        "name": "Jill and Jack's well",
        "code": "WELL"
    },
    {
        "name": "Herp and derp",
        "code": "HD"
    }
]

Но в документах jQueryUI говорится, что ему нужен плоский массив строк.

Пользователи будут искать по имени, а не по коду (давайте притворимся)Что еще более важно, я хочу иметь возможность получить доступ к тому, что этот код, глядя на select: function(event, ui) {/*...*/}, будь то через data-xxx или какой-то другой вуду.Я хотел бы избегать использования второго списка для сопоставления строк с содержимым метки (давайте представим, что у нас могут быть одинаковые дубликаты имен, и пользователи никогда не запутаются), я просто хочу приклеить данные кода на метку имени.

Подобный вопрос был задан в 2008 году , но с тех пор плагин больше не имеет .result().

1 Ответ

13 голосов
/ 03 мая 2011

Но в документации jQueryUI говорится, что ему нужен плоский массив строк.

На самом деле :

Локальные данные могут быть простой массив строк или содержит объекты для каждого элемента в массиве со свойством label или value или обоими.

Так что, пока ваши данные имеют свойство не менее value для каждого объекта в массиве, виджет может обрабатывать его: 

[
    {
        "name": "John's wild bacon emporium",
        "code": "BACON",
        "value": "Bacon",
    },
    {
        "name": "Jill and Jack's well",
        "code": "WELL"
        "value": "Well"
    },
    {
        "name": "Herp and derp",
        "code": "HD",
        "value": "Herp"
    }
]

Запрос пользователя будет сопоставлен со свойством value каждого объекта (обратите внимание, что метка не требуется; указывайте ее только в том случае, если вы хотите показать в списке параметров автозаполнения что-то отличное от value).

Вы можете получить доступ к дополнительным данным об элементе в обработчике события select: 

select: function(event, ui) {
    alert(ui.item.code); // Access the item's "code" property.
}

Надеюсь, что это поможет.Вот простой пример: http://jsfiddle.net/vR3QH/. Я удалил свойство name и вместо него просто использую свойство value.Каждый раз, когда элемент выбран, элементы input обновляются со значениями свойств, принадлежащих выбранному элементу.

...