jquery - 如何操作jquery自动完成插件来获取id和值

Question

我正在使用这个 jquery 自动完成插件。自动完成的数据格式如下

"name"=>"1" format. 

我只是在下拉列表中显示产品名称，显示产品 ID 非常不安全。但当我提交时，我需要所选产品的 ID。为此，我尝试为输入文本字段提供一个属性，如下所示

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

现在，当用户选择任何产品时，productid 属性应该获取此值。如何解决这个问题

Answer 1

我认为您需要的是select选项。

假设您的数据源是以下对象数组:

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

默认情况下，插件将在对象中查找标签和值属性(如果“值”丢失，它将使用“标签”)。

注意:如果您提供一个值，当您在菜单中选择建议的项目时，它将用于设置输入的值!

所以我们的例子，属性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);
    }
});

工作 DEMO