javascript - Twitter Bootstrap Typeahead - ID 和标签

Question

我正在使用 Bootstrap 2.1.1 和 jQuery 1.8.1 并尝试使用 Typeahead 的功能。

我尝试显示一个标签并使用一个id，就像一个标准的<select />

这是我的预输入初始化:

$(':input.autocomplete').typeahead({
    source: function (query, process) {
        $('#autocompleteForm .query').val(query);
        return $.get(
            $('#autocompleteForm').attr('action')
          , $('#autocompleteForm').serialize()
          , function (data) {
              return process(data);
          }
        );
    }
});

这是我发送的 JSON 类型

[{"id":1,"label":"machin"},{"id":2,"label":"truc"}]

我怎么知道process()显示我的标签并将所选 ID 存储在另一个隐藏字段中？

Answer 1

这里有一个很好的教程解释了如何做到这一点:http://tatiyants.com/how-to-use-json-objects-with-twitter-bootstrap-typeahead/ (如果帖子的主要部分尚未反射(reflect)，请阅读我在该页面上的评论)。

根据该教程和您提供的 JSON，您可以执行如下操作:

$(':input.autocomplete').typeahead({
    source: function(query, process) {
        objects = [];
        map = {};
        var data = [{"id":1,"label":"machin"},{"id":2,"label":"truc"}] // Or get your JSON dynamically and load it into this variable
        $.each(data, function(i, object) {
            map[object.label] = object;
            objects.push(object.label);
        });
        process(objects);
    },
    updater: function(item) {
        $('hiddenInputElement').val(map[item].id);
        return item;
    }
});