CODEWITHSUNDEEP
javascripttwitter-bootstraptypeahead.jsbootstrap-tags-input
Scott
Scott

Reputation: 1253

How Can I Allow Custom Values With Bootstrap Tags Input and typeahead.js?

I am trying to use the Bootstrap Tags Input v.0.5.0 with typeahead.js v.0.11.1 and Bootstrap v3.3.5. It is working for me with the exception that I am unable to enter tags that do not exist in my typeahead source array. What do I need to change in order to allow input of items that don't exist in my source array?

Here's my sample html:

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

Here's my sample 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()
  }
});

Upvotes: 1

Views: 1344

Answers (1)

Ishmael Smyrnow
Ishmael Smyrnow

Reputation: 952

The current tagsinput documentation indicates that free input "is only possible when using string as tags". This makes me think that using Typeahead + Bloodhound as a source may conflict with the freeInput option.

I would try adding a typeahead source as an array of strings instead of using Bloodhound.

$('#dailyTagsInput').tagsinput({
  ...
  typeaheadjs: {
    name: 'states',
    source: $scope.statesSource
  }
});

Upvotes: 1

Related Questions