使用一个对象数组，用typeaheadjs引导tagsinput

Question

我正试图让tagsinput工作与typeahead。我有一个对象数组作为数据源。"label"的值应该是搜索和显示的值，"value"的值应该是提交的值。有人会认为这很简单。

但是当我使用这个对象数组时，typeahead菜单不显示。

[...]
<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，在中输入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/