Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap Typeahead - don't autoselect first item?

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")
  )
like image 660
Pezholio Avatar asked Mar 05 '12 10:03

Pezholio


3 Answers

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

like image 114
Peter Clause Avatar answered Oct 22 '22 13:10

Peter Clause


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

https://gist.github.com/1977953

like image 20
Pezholio Avatar answered Oct 22 '22 12:10

Pezholio


You can set the attribute in angular-bootstrap typehead

typeahead-focus-first="false"

Similar option availble for jQuery

like image 3
Sagar Jethi Avatar answered Oct 22 '22 12:10

Sagar Jethi