7

Hi I am using typeahead in twitter bootstrap. What I found here is that in autocomplete dropdown, it selects first option by default. My requirement is that initially it should have nothing selected, it goes to first option only when I press navigation key (up or down) or when I hover over it. Is it possibe using typeahead.

7
  • Have you tried using the highlighter option with a value of -1?
    – Tkingovr
    Dec 26, 2012 at 0:39
  • no I will try that, let me check. Dec 26, 2012 at 0:59
  • @Tkingovr sorry it is not working, and highlighter is a function, how it can take value. Dec 26, 2012 at 1:15
  • You can pass it as a data attribute data-highlighter="-1"
    – Tkingovr
    Dec 26, 2012 at 1:35
  • @Tkingovr it is not working now also. I guess passing it through data attribute will not do the job, since I am doing everything through javascript. Dec 26, 2012 at 4:15

7 Answers 7

7

To avoid selection by typeahead first option by default, I used parameter documented in official docs: autoSelect. By default it set to 'true'

My code:

$('#searchString', this.el).typeahead({
        source: function (query, process) {
            var q = '/autocompleteSearch?searchString=' + query;               

            return $.get(q, function (data) {
                return process(data);
            });
        },
        minLength: 3,
        autoSelect: false
    });
2

There is the more powerfull typeahead project from Twitter which doesn't have this problem. I don't understand why this project is not included directly in Twitter Bootstrap.

You can see here some examples.

1
  • typeahead.js.org/examples is the newer / maintained code base forked off the twitter typeahead that has not been maintained in years.
    – Artistan
    May 31, 2017 at 16:05
2

You can simply override the bootstrap typeahead render method to achieve this. The line items.first().addClass('active') from the original typeahead plugin will be removed in this override.

$.fn.typeahead.Constructor.prototype.render = function(items) {
     var that = this

     items = $(items).map(function (i, item) {
       i = $(that.options.item).attr('data-value', item)
       i.find('a').html(that.highlighter(item))
       return i[0]
     })

     this.$menu.html(items)
     return this
};
0
1

Although not exactly what you ask, there is a nice workaround here. Basically, you make the text that is inserted by the user into the first typeahead suggestion. As the linked answer mentiones, this is the same behaviour you get from the Chrome address bar.

2
  • Thanks for this suggestion. I agree it doesn't answer the exact question but it ended up being the best solution for me Sep 30, 2013 at 18:16
  • @DerekWhite How did you fix this problem? Where is there an example? Thanks!
    – hyperrjas
    Oct 2, 2013 at 18:52
0

1-Open bootstrap-typeahead.js and comment items.first().addClass('active')

render: function (items) {
  var that = this

  items = $(items).map(function (i, item) {
    i = $(that.options.item).attr('data-value', item)
    i.find('a').html(that.highlighter(item))
    return i[0]
  })

//  items.first().addClass('active')
  this.$menu.html(items)
  return this
}
0

I've found a solution here that works by adding this first:

var newRender = function(items) {
     var that = this

     items = $(items).map(function (i, item) {
       i = $(that.options.item).attr('data-value', item)
       i.find('a').html(that.highlighter(item))
       return i[0]
     })

     this.$menu.html(items)
     return this
};
$.fn.typeahead.Constructor.prototype.render = newRender;

$.fn.typeahead.Constructor.prototype.select = function() {
    var val = this.$menu.find('.active').attr('data-value');
    if (val) {
      this.$element
        .val(this.updater(val))
        .change();
    }
    return this.hide()
};

which overrides the bootstrap typeahead to not initially select anything

0

By default the "typeahead-focus-first" is set to true, just set it to false by typeahead-focus-first="false".

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.