CODEWITHSUNDEEP
bootstrap-typeaheadbootstrap-tags-input
Yann Bertrand
Yann Bertrand

Reputation: 3114

Bootstrap tags input with typeahead does not work

I want to restrict tags usage to only ones got from an API.

The "Object as tags" example seems to be what I'm looking for, but typeahead doesn't seem to work as expected (no placeholder opens)

<input id="tags" type="text">

<script>
  var tags = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: 'http://example.com/tags'
  });
  tags.initialize();

  $('input#tags').tagsinput({
    itemValue: 'id',
    itemText: 'name',
    typeahead: {
      name: 'tags',
      displayKey: 'name',
      source: tags.ttAdapter()
    }
  });
</script>

Here is some data returned from the API:

[
  {
    "name": "amazon",
    "createdAt": "2015-07-27T08:28:29.320Z",
    "updatedAt": "2015-07-27T08:28:29.320Z",
    "id": "55b5ebad3bbd894909b0eef5"
  },
  {
    "name": "android",
    "createdAt": "2015-07-27T08:28:29.398Z",
    "updatedAt": "2015-07-27T08:28:29.398Z",
    "id": "55b5ebad3bbd894909b0eef6"
  },
  {
    "name": "c-sharp",
    "createdAt": "2015-07-27T08:28:29.485Z",
    "updatedAt": "2015-07-27T08:28:29.485Z",
    "id": "55b5ebad3bbd894909b0eef7"
  },
  ...
]

I'm using Bootstrap 3.1.0, jQuery 1.10.2, Bootstrap Tags Input 0.4.2 and Typeahead 0.11.1.

Upvotes: 1

Views: 1515

Answers (2)

stranger789
stranger789

Reputation: 143

I saw a lot of issues with typeaheadjs and tagsinput.

After a lot of headaches, i found a solution.

Just remove these last lines on bootstrap-tagsinput.js : 

$(function () {
$("input[data-role=tagsinput], select[multiple][data-role=tagsinput]").tagsinput();
});

The library code creates tagsinput data with no options, so your typeahead options will be ignored.

Upvotes: 0

eduardobarbiero
eduardobarbiero

Reputation: 61

var tags = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  remote: {
    url: 'http://example.com/tags',
    filter: function(response) {
      return response;
    }
  }
});
tags.initialize();

Upvotes: 1

Related Questions