Question

我正在使用Bootstrap Typeahead插件：

$('#Organisation').typeahead({
            source: function (query, process) {
                return $.get(AppURL + 'Organisations/Manage/SearchByName/',
                {
                    term: query
                },
                function (data) {
                    var results = [];
                    var fullResults = [];
                    $.each(data, function (index, item) {
                        results.push(item.label);
                        fullResults.push({
                            id: item.ID,
                            label: item.label
                        });
                    });

                    return process(results);


                });
            },
            updater: function (selection) {
                $('#OrganisationID').val(selection);
            }
        });

我有两个返回的数组，这是因为Typeahead只需要一个字符串列表而不是一个对象。第二个数组包含标签和id。

一旦用户从列表中选择一个项目，我需要从该选择中获取ID，然后使用它插入隐藏字段。但选择只是名称，因为ID不能通过Typeahead传递。

关于如何解决这个问题的任何想法？

两个返回数组的示例：

结果：["Organisation 1","Organisation 2"]

fullResults：[{"label":"Organisation 1","ID":2},{"label":"Organisation 2","ID":1}]

Answer 1

在网上搜索了一下后，我找到了this HowTo。在它里面他们做你想要的，但没有ajax。

您还应该能够从源函数返回一个对象，但是您需要重新实现typeahead的所有辅助函数。

Answer 2

您cannot normally use JSON objects直接在Bootstrap Typeahead（2.x）中，但您可以轻松调整它以执行此操作。这个问题的措辞应该有助于人们在一个地方找到这个。其他questions已经提出类似的问题，但与你的方式不一样。

var typeahead = control.typeahead({ /* ... */ }).data('typeahead');

// manually override select and render
//  (change attr('data-value' ...) to data('value' ...))
//  otherwise both functions are exact copies
typeahead.select = function() {
    var val = this.$menu.find('.active').data('value')
    this.$element.val(this.updater(val)).change()
    return this.hide()
};
typeahead.render = function(items) {
    var that = this

    items = $(items).map(function (i, item) {
        i = $(that.options.item).data('value', item)
        i.find('a').html(that.highlighter(item))
        return i[0]
    });

    items.first().addClass('active')
    this.$menu.html(items)
    return this
};

除此之外，您必须覆盖highlighter，matcher，sorter和updater，但这些可以通过传递到typeahead的选项来完成， in item（s）现在是你的JSON对象。

选择item时，会调用updater，这就是设置值和使用JSON数据的方式：

updater: function (item) {
    someGlobalValue = item.id;

    // must return a normal string; sets the textbox value
    return item.name;
}

这也意味着您不需要做任何想要关联的事情，或者在另一个答案中“记住”Typeahead引用示例外部的项目。整个重写过程中最烦人的部分是在每次使用中重写sorter。

Answer 3

我有一个丑陋的解决方案......

我需要能够搜索标题，但最终将ID放入文本输入中......

我的JSON是

[
{"id": 1, "title": "Foo foo foo"},
{"id": 2, "title": "Bar bar bar"},
...
]

和我的电话......

$(function() {
    $.get("path/to/data.json", function(data){
          $(".typeahead").typeahead({
              "source": data,
              "displayText": function(item){
                  // OMG ugly !!! :p
                  if (item.id == undefined) return item;
                  return item.title + ' (' + item.id + ')';  
              },
              "updater": function(item) {
                  return item.id;
              }});
    }, 'json');
});

一切正常，但是当您点击所选项目时，只会将ID放入该字段...

完成了！丑陋但完成了......

使用https://github.com/bassjobsen/Bootstrap-3-Typeahead

进行测试

Answer 4

考虑重写“匹配器”，“分拣机”，“更新器”和“荧光笔”功能，就像在https://stackoverflow.com/a/14959406/593415中描述的那样

这确实是一个技巧，因此您可以使用Bootstrap Typeahead（2.x）操作对象

使用Twitter Bootstrap Typeahead处理对象

4 个答案: