Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 755
Ander Avatar asked Apr 21 '15 18:04

Ander


People also ask

How to make tags in Bootstrap?

Use a <select multiple /> as your input element for a tags input, to gain true multivalue support. Instead of a comma separated string, the values will be set in an array. Existing <option /> elements will automatically be set as tags. This makes it also possible to create tags containing a comma.

How do you use input tags?

The input tag is used within < form> element to declare input controls that allow users to input data. An input field can be of various types depending upon the attribute type. The Input tag is an empty element which only contains attributes. For defining labels for the input element, < label> can be used.

What is Typeahead bootstrap?

The typeahead input fields are very popular in modern web forms. The main purpose of using typeahead is to improve the user experience by supplying hints or a list of possible choices based on the text they've entered while filling a form or searching something — like the Google instant search.

How do you create a tag input?

To create Tags Input in HTML CSS & JavaScript. First, you need to create three Files: HTML, CSS & JavaScript files. After creating these files just paste the following codes into your file. You can also download the source code files of this Tags Input project from the given download button.


1 Answers

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.

like image 166
Dhiraj Avatar answered Sep 28 '22 00:09

Dhiraj