3

I am using tokenfield for bootstrap with twitter typeahead and I am able to this.

https://i.stack.imgur.com/dtFbj.png

I want only value to be displayed.

Here is my JS:

var engine = new Bloodhound({
        local: bloodhound_tag_data,
        datumTokenizer: function(d) {
            return Bloodhound.tokenizers.whitespace(d.value);
        },
        queryTokenizer: Bloodhound.tokenizers.whitespace
    });
    engine.initialize();
    $('#id_tags').tokenfield({
        typeahead: [null, { source: engine.ttAdapter() }]
    });

'bloodhound_tag_data' is a list of objects with 'id' and 'value' keys.

thisizmohit
  • 41
  • 5

1 Answers1

2

I had the same problem. In your code try replacing typeahead: [null, { source: engine.ttAdapter() }] with the following:

typeahead: [null, {
   display: 'value',
   source: engine.ttAdapter()
}]

This resolved it in my case where I observed something very similar to your screenshot.

Some background: The documentation for the display option of typeahead.js appears a little hard to understand for less experienced people like myself. It says (words that I think are relevant in bold):

For a given suggestion, determines the string representation of it. This will be used when setting the value of the input control after a suggestion is selected. Can be either a key string or a function that transforms a suggestion object into a string. Defaults to stringifying the suggestion.

In this case 'value' is the key into the field of one of the elements in array bloodhound_tag_data.

Happy coding!

If anything in my answer can be improved please add a comment with constructive suggestions. Thank you!

Manfred
  • 5,320
  • 3
  • 35
  • 29