bootstrap tagsinput with typeaheadjs 使用对象数组

Question

我正在尝试让 tagsinput 与 typeahead 一起工作。我有一个对象数组作为数据源。 'label'的值应该是搜索到显示的值，'value'的值应该是提交的值。很简单，有人会想。

但是当我使用这个对象数组时没有显示预输入菜单。

[...]
<select name="users" multiple class="auto_users" ></select>
[...]
<script>
  $(document).ready(function () {
    var users = [{label: "Super 1", value: "8"},{label: "Super2", value: "9"},{label: "Almindelig1", value: "10"},{label: "Almindelig2", value: "11"}];

    var users = new Bloodhound({
      datumTokenizer: Bloodhound.tokenizers.whitespace,
      queryTokenizer: Bloodhound.tokenizers.whitespace,
      local: users
    });

    users.initialize();

    $('.auto_users').tagsinput({
      typeaheadjs: {
        name: 'users',
        displayKey: 'label',
        valueKey: 'value',
        source: users.ttAdapter()
      }
    });
  });

</script>

如果我将其更改为一个简单的字符串数组并删除 displayKey/valueKey 设置，它会起作用，但显然没有提交原始对象数组中的 ID。

我错过了什么？

Answer 1

首先，为了能够使用 bloodhound，应该使用来自 here 的 typeahead js。

其次，datumTokenizer配置不正确。它应该是这样的

datumTokenizer: Bloodhound.tokenizers.obj.whitespace('label'),

这是一个演示 https://jsfiddle.net/dhirajbodicherla/aawmp3np/47/

更新

itemValue 和 itemText 选项应该可以做到。

itemValue: 'value',
itemText: 'label',

完整片段

$('select').tagsinput({
    itemValue: 'value',
    itemText: 'label',
    typeaheadjs: {
        name: 'users',
        displayKey: 'label',
        source: users.ttAdapter()
    }
});

已更新演示 https://jsfiddle.net/dhirajbodicherla/aawmp3np/48/

bootstrap tagsinput with typeaheadjs 使用对象数组

bootstrap tagsinput with typeaheadjs using an array of objects

jquery

twitter-bootstrap

twitter-typeahead

bloodhound

更新