jqueryUI автоматично довършване с допълнителни данни?

Използване на 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().


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

Отговори (1)


arrow_upward
13
arrow_downward

Но документите на jQueryUI казват, че иска плосък масив от низове.

Всъщност:

Локалните данни могат да бъдат обикновен масив от низове или съдържат обекти за всеки елемент в масива, с етикет или стойностсвойство или и двете.

Така че докато вашите данни имат поне свойство 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
Атрибутите на името тук са подвеждащи, тъй като правилният ключ е label. - person lav; 15.12.2017
comment
@lav Това е вярно - person Andrew Whitaker; 15.12.2017