Как манипулировать плагином автозаполнения jquery, чтобы получить и идентификатор, и значение - PullRequest
Новая
       5

Как манипулировать плагином автозаполнения jquery, чтобы получить и идентификатор, и значение

3 голосов
/ 19 января 2012

Я использую этот плагин автозаполнения jquery.Формат данных для автозаполнения подобен следующему 

"name"=>"1" format.

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

input type='text' name='product' productid=''

Теперь, когда пользователь выбирает любой продукт, атрибут productid должен получить это значение.Как это сделать

1 Ответ

0 голосов
/ 19 января 2012

Я думаю, вам нужен вариант select.

Допустим, вашим источником данных является следующий массив объектов: 

var data = [
    {
        label: 'Product 1',
        productid: '1'
    },
    {
        label: 'Product 2',
        productid: '2'
    },{
        label: 'Product 3',
        productid: '1'
    }];

По умолчанию плагин будет искать свойство label и value в вашем объекте (если «value» отсутствует, он будет использовать «label»).

Примечание : что если вы укажете значение, оно будет использоваться для установки значения входа при выборе предложенного пункта в меню!

Таким образом, наш пример, свойство productid фактически не будет использоваться непосредственно плагином, он не знает об этом, но у нас будет доступ к нему в параметре обработчиков событий ui.item.

Я бы добавил скрытое поле для хранения фактического выбранного значения (а не атрибута «productid», как вы предлагаете в своем вопросе). 

<input type="hidden" id="productid" value="" />

Код JS: 

$("#myinput").autocomplete({
    source: data,
    // the 'select' event is triggered when an item is selected in the menu
    select: function(e, ui) {
        $("#productid").val(ui.item.productid);
        // if you want to add the "productid" attiubte
        $(this).attr('productid', ui.item.productid);
    }
});

Рабочая ДЕМО

...