Bootstrap Typeahead - don't autoselect first item?

Question

I'm using this fork of the Twitter Bootstrap typeahead library, which allows asynchronous data sources as well as onselect events. It's working really well for me so far, but when a user tabs out of the field (i.e. doesn't actively select a drop down entry), the onselect event is fired (which in my case, redirects the user to another page). Is there any way I can stop the onselect event being fired if a user doesn't click? Here's what I've got so far (in CoffeeScript):

$(document).ready ->
  $('#inspection_name').typeahead(
    source: (typeahead, query) ->
      $.ajax(
        url: "/inspections/search.json?name="+query
        success: (data) =>
          return_list = []
          $(data.results.inspections).each ->
            return_list.push("<span data-url='" + this.uri + "/edit'>" + this.name + ", " + this.town + "</span>") 

          typeahead.process(return_list)
      )

    onselect: (obj) =>
      window.location.href = $(obj).attr("data-url")
  )

Solution 1

In the end, I answered my own question, and put the adjustments in this Gist:

https://gist.github.com/1977953

Solution 2

For the default Bootstrap, this will work:

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

Somewhere after including bootstrap.(min.)js

Solution 3

You can set the attribute in angular-bootstrap typehead

typeahead-focus-first="false"

Similar option availble for jQuery

Solution 4

All credit should go to @jrochkind but I wanted to put the answer from Bibliographic Wilderness: Overriding bootstrap typeahead to not initially select here for more clarity.

Add this somewhere after bootstrap.js:

/**
 * Makes it so the first typeahead result isn't auto selected
 *
 * @author Jonathan Rochkind
 * @url http://bibwild.wordpress.com/2013/04/04/overriding-bootstrap-typeahead-to-not-initially-select/
 */
$.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()
};
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;

View more solutions

Comments

[schpet]

thanks for this, i've expanded on it to have some hacks to make the tab key cycle through options as well: gist.github.com/peterschilling/5118516

[Sonson123]

See my answer to a similar SO-question for another solution.

[JToland]

I'm using the standard, default Bootstrap and this works except it also introduces a bug where when I hit the "ENTER" key, it no longer performs the search (I have to manually click the submit button I have in place).

[JToland]

Just found this link (bibwild.wordpress.com/2013/04/04/…) which explains the problem I found as noted above and how to correctly fix it.