如何获得带有项目ID的JQuery UI自动完成功能

Question

我在这里看到了这篇文章：jQuery UI带有项目和ID的自动完成功能，但是我无法弄清楚。

这是我的输入HTML：

<input type="text" class="tags" style="width:250px; height:24px;"> </input>' 
<input type="hidden" name="tags_id" id="tags_id" />

这是我的ajax电话：

var data = {};
$.get('/tags',data, function(tag_list) {
                autocomplete_source_list = [];

                for(var i = 0; i < tag_list.length; i++){
                    autocomplete_source_list.push([tag_list[i].fields.display_name, [2,3,4,5,6,7,8,9,1,2]]);
                }
                jQuery( ".tags" ).autocomplete({
                    source: autocomplete_source_list,
                    select: function (event, ui) {
                        $(".tags").val(ui.item.label); // display the selected text
                        $(".tags_id").val(ui.item.value); // save selected id to hidden input
                        console.log("selected id: ", ui.item.label)
                    }
                });

            });

我应该如何设置ID，我应该将2D数组传递给源？当我给出源代码只是文本时，则ui.item.value = ui.item.label =“任何文本”。我看不到ID的附加方式。

请给我一些帮助。谢谢

Answer 1

从精美的手册中：

本地数据可以是一个简单的字符串数组，也可以包含该数组中每个项目的对象，并带有标签或值属性，或同时包含这两个属性。标签属性显示在建议菜单中。用户从菜单中选择某项后，该值将插入到输入元素中。

所以，label在下拉菜单中去，并在value进入<input type="text">和你想要的东西有点不同，要在一件事<input type="text">和菜单，并在一个单独的另一件事<input type="hidden">。

假设您从服务器返回了一些原始数据，例如：

var raw = [
    { value: 1, label: 'one'   },
    { value: 2, label: 'two'   },
    { value: 3, label: 'three' },
    { value: 4, label: 'four'  }
];

然后，您可以构建一个数组和一个简单的映射对象：

var source  = [ ];
var mapping = { };
for(var i = 0; i < raw.length; ++i) {
    source.push(raw[i].label);
    mapping[raw[i].label] = raw[i].value;
}

该source数组将被提供给.autocomplete()您，您的select处理程序将使用该数组mapping找出要放入的内容<input type="hidden">：

$('.tags').autocomplete({
    source: source,
    select: function(event, ui) {
        $('.tags_id').val(mapping[ui.item.value]);
    }
});

演示：http：//jsfiddle.net/ambiguous/GVPPy/