Search code examples
typeahead.jsbootstrap-tags-input

How to use typeahead options in Bootstrap Tags Input


I'm using Bootstrap tags input with typeahead and I was wondering how can I set the default options to typeaheadjs. In the examples I've seen something like this:

var input = $('input');
input.tagsinput({
    itemValue: 'value',
    itemText: 'text',
    typeaheadjs: {
        name: 'engine',
        displayKey: 'text',
        source: engine.ttAdapter()
}

Here, typeaheadjs represent a dataset, but how can I add the basic options like hint, highlight, minLength?


Solution

  • You can give add typeaheadjs as an array of objects. First object being options and second datasets

    typeaheadjs: [ {options}, {datasets} ]

    Something like this should do.

    $('input').tagsinput({
        typeaheadjs: [{
              minLength: 3,
              highlight: true
        },{
            minlength: 3,
            name: 'citynames',
            displayKey: 'name',
            valueKey: 'name',
            source: citynames.ttAdapter()
        }],
        freeInput: true
    });
    

    Here is a DEMO

    Hope this helps.