Как можно разрешить использование пользовательских значений с помощью тегов начальной загрузки и typeahead.js?

Я пытаюсь использовать ввод тегов Bootstrap v.0.5.0 с typeahead.js v.0.11.1 и Bootstrap v3.3.5. Это работает для меня за исключением того, что я не могу ввести теги, которые не существуют в моем исходном массиве typeahead. Что мне нужно изменить, чтобы разрешить ввод элементов, которых нет в моем исходном массиве?

Вот мой пример HTML:

<input type="text" id="dailyTagsInput" name="dailyTagsInput" class="form-control">

Вот мой пример JS:

    $scope.states = ['Alabama', 'Alaska', 'Arizona'];

$scope.statesSource = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.whitespace,
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  local: $scope.states
});

$('#dailyTagsInput').tagsinput({
  maxChars: 50,
  maxTags: 10,
  trimValue: true,
  freeInput: true,
  typeaheadjs: {
    name: 'states',
    source: $scope.statesSource.ttAdapter()
  }
});

1 ответ

Текущая документация по тегам указывает, что свободный ввод "возможен только при использовании строки в качестве тегов". Это заставляет меня думать, что использование Typeahead + Bloodhound в качестве источника может конфликтовать с freeInput вариант.

Я бы попробовал добавить источник typeahead в виде массива строк вместо использования Bloodhound.

$('#dailyTagsInput').tagsinput({
  ...
  typeaheadjs: {
    name: 'states',
    source: $scope.statesSource
  }
});
Другие вопросы по тегам