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

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

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

[
    {
        "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().


jquery jquery-ui jquery-ui-autocomplete
person Incognito    schedule 03.05.2011    source источник

Ответы (1)


arrow_upward
13
arrow_downward

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

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

Локальные данные могут быть простым массивом строк или содержать объекты для каждого элемента массива с меткой или >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 элементов обновляются значениями свойств, принадлежащих выбранному элементу.

person Andrew Whitaker    schedule 03.05.2011
comment
Спасибо! Двойное спасибо за jsfiddle! Урок, извлеченный сегодня: замедлитесь и прочитайте то, что вы думали, что знаете, потому что вы просматривали это. - person Incognito; 03.05.2011
comment
@ user257493: Нет проблем! Они действительно должны сделать параметр source более заметным в документации. - person Andrew Whitaker; 03.05.2011
comment
Атрибуты имени здесь вводят в заблуждение, поскольку правильным ключом является метка. - person lav; 15.12.2017
comment
@lav это правда - person Andrew Whitaker; 15.12.2017