16

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?

Ander
  • 3,706
  • 4
  • 27
  • 49

1 Answers1

23

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.

Dhiraj
  • 31,130
  • 7
  • 57
  • 77
  • I see... thanks @DhirajBodicherla that doesn't work using the package from the [examples site](http://twitter.github.io/typeahead.js/examples/). It seems to be out of date. I've tried with the master branch and it works perfectly, Thanks! – Ander Apr 22 '15 at 08:01
  • The demo does not appear to be functional. Typeahead is not working. – ctorx Jul 08 '16 at 22:19
  • @ctorx: It is working. Start typing for a word and it'll work – Dhiraj Jul 09 '16 at 04:25
  • [The demo](https://jsfiddle.net/dhirajbodicherla/aawmp3np/35/) is functional, but funky... the textbox changes in size as you type... – Jedi Jul 12 '16 at 03:19
  • 7
    The demo works perfect for me but I cannot seem to get the tyepahead functionality using my own site. The tags work but I don't see a list of data that I can choose from. I even copied and pasted the demo to try it out. – tyelford Oct 25 '16 at 03:49
  • @Deep3015 and tyelford The demo seems to be working. Min length is 3 hence you were not able to see a list. Type at least 3 characters – Dhiraj Feb 14 '17 at 18:52
  • @Dhiraj I am saying how to send the selected value from the input via ajax. Input tags are not normal input values ,they are span elements. – Deep 3015 Feb 14 '17 at 19:35
  • @Deep3015 Firstly, your question is not a scope of this post. You should have asked another question. From the top of my head `$('input-element-to-which-tagsinput-is-hooked-to').val()` should work. – Dhiraj Feb 14 '17 at 20:30
  • @Dhiraj check [fiddle](https://jsfiddle.net/deep3015/jjcsuqvz/) is not giving result as suggested – Deep 3015 Feb 15 '17 at 12:45
  • @Deep3015 It should be `alert($('.category-container > > input').val());` because tagsinput stores the values inside `.data()` and not as a value in the input. Check this https://jsfiddle.net/dhirajbodicherla/jjcsuqvz/1/ – Dhiraj Feb 15 '17 at 18:10