Bootstrap Typeahead: Remove forced selection of first item

Question

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.

Cyclosis

Have you tried using the highlighter option with a value of -1? – Tresa

no I will try that, let me check. – Cyclosis

@Tresa sorry it is not working, and highlighter is a function, how it can take value. – Cyclosis

You can pass it as a data attribute data-highlighter="-1" – Tresa

@Tresa 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. – Cyclosis

any luck yet? i am also looking for the solution – Hamal

@Hamal No, I have switched to jquery autocomplete. It is better than typeahead, for this case. – Cyclosis

Answer 1

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.

Kennakennan

typeahead.js.org/examples is the newer / maintained code base forked off the twitter typeahead that has not been maintained in years. – Gunlock

Answer 2

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
    });

Indiscrete

Answer 3

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
};

Metalinguistics

Answer 4

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.

Galvanism

Thanks for this suggestion. I agree it doesn't answer the exact question but it ended up being the best solution for me – Vinic

@DerekWhite How did you fix this problem? Where is there an example? Thanks! – Toots

Answer 5

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
}

Albaugh

Answer 6

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

Tormentor

Answer 7

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

Sarajane