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/(如果没有,请阅读我对该页面的评论已经反映在帖子的主要部分).

根据该教程和您提供的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;
    }
});                    

Answer 2

从Twitter Typeahead(https://github.com/twitter/typeahead.js)版本0.10.1开始,本机支持Id/Label:

  $('input[name=address]').typeahead({
        hint: false
    }, {
        source: function (query, cb) {
            $.ajax({
                url: '/api/addresses?q=' + encodeURIComponent(query),
                dataType: 'json',
                cache: false,
                type: 'GET',
                success: function (response, textStatus, jqXHR) {
                    cb(response.data);
                },
                error: function (jqXHR, textStatus, errorThrown) {
                }
            });
        },
        name: 'addresses',
        displayKey: 'text'
    }).on('typeahead:selected', function (e, suggestion, name) {
        window.location.href = '/' + suggestion.id;
    });

如果上面的例子,我将一个对象数组传递给源回调(cb).通过指定displayKey:'text',我告诉库使用'text'属性进行自动建议.当调用'typeahead:select'回调时,传入的第二个参数(suggestion)包含所选的对象.

Answer 3

澄清我在评论中说的话.如果您希望在同一页面上有多个类型前置,则需要在函数中定义每个类型,并为它们创建单独的映射变量.

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

function initToField() {
    var map;
    $('#to: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
            objects = constructMap(data, map);
            process(objects);
        },
        updater: function(item) {
            $('#hidden-to-input').val(map[item].id);
            return item;
        }
    });
}

function constructMap(data, map) {
    var objects = [];
    $.each(data, function(i, object) {
        map[object.label] = object;
        objects.push(object.label);
    });
    return objects;
}

$(function initFields() {
    initFromField();
    initToField();
});

请注意我如何在两个字段初始化函数中限定map变量.这很重要,它确保两个输入字段都不使用相同的映射变量.

Answer 4

我自己一直在努力解决这个问题，这是我想出的解决方案，适用于以下类型的数据：

[{'id':an_id, 'name':a_name}]

曾是：

$("#memberSearch").typeahead({
            source: function (query, process) {
                var $this = this //get a reference to the typeahead object
                return $.get('/getSwimmerListJSON',function(data){
                    var options = [];
                    $this["map"] = {}; //replace any existing map attr with an empty object
                    $.each(data,function (i,val){
                        options.push(val.name);
                        $this.map[val.name] = val.id; //keep reference from name -> id
                    });
                    return process(options);
                });
            },
            updater: function (item) {
                console.log(this.map[item],item); //access it here

            }

        });