Question

我试图让taginput与typeahead一起工作。我有一个对象数组作为数据源。＆＃39;标签＆＃39;的价值应该是搜索和显示的那个，以及＆＃39;值＆＃39;的值。应该是提交的值。人们会想，非常直截了当。

但是当我使用这个对象数组时，没有显示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

首先，为了能够使用猎犬，应该使用来自 here 的预先输入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 tags使用一个对象数组输入typeaheadjs

1 个答案:

更新