5

我正在使用 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"]

完整结果：[{"label":"Organisation 1","ID":2},{"label":"Organisation 2","ID":1}]

4

4 回答 4

6

在网上搜索了一下后，我找到了这个HowTo。他们在其中做你想做的事，但没有ajax。

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

于 2013-04-19T14:06:42.343 回答
3

您通常不能在 Bootstrap Typeahead (2.x) 中直接使用 JSON 对象，但您可以轻松地对其进行调整。这个问题的措辞应该有助于人们在一个地方找到它。其他问题也提出了类似的问题，但与您所做的方式不同。

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，但这些可以通过传递给预先输入的选项来完成，其中传入的item(s) 现在是您的 JSON 对象。

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

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

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

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

于 2013-04-23T02:34:26.303 回答
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测试

于 2016-10-28T17:03:22.910 回答
0

考虑重写“matcher”、“sorter”、“updater”和“highlighter”函数，就像在https://stackoverflow.com/a/14959406/593415中描述的那样

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

于 2013-08-21T08:51:56.657 回答