Select Typeahead Bootstrap results on click

Typeahead(Twitter Bootstrap) clickable bug fixed. Auto suggest results from typeahead didn’t allow users to click the results to select them. Change the following in bootstrap-typeahead.js to make bootstrap typeahead results clickable.

, blur: function (e) {
var that = this
setTimeout(function () { that.hide() }, 150)
}

And replace it with

, blur: function (e) {
var that = this
e.stopPropagation()
e.preventDefault()
setTimeout(function () {
if (!that.$menu.is(‘:hover’)) {
that.hide();
}
},150)
}

Now you can select results with mouse click.
Hope this helps, kindly let me know if it helps.

Comments (7)
  • John

    July 31, 2012

    Hey thank you so much. I was searching this typeahead bug fix over a month and finally got it :)

  • Roney

    August 2, 2012

    You are a life saver. I was struggling to get bootstrap typeahead results on click and you provide the solution. Thanks a ton.

  • Micheal

    August 2, 2012

    Great job. Very helpful, actually i was trying to make typeahead clickable for a long time and you have fixed a famous bug in bootstrap :)

  • Jack

    August 6, 2012

    Hey,

    This bit doesn’t work on my browser (chrome):
    if (!that.$menu.is(‘:hover’)) {
    that.hide();
    }

    I cut it out, and it still works – what does that code piece do? Will I be missing it sometime?

    Thanks for the fix!

    • admin

      August 8, 2012

      Thanks for your comment. That small block will check whether user has clicked outside typeahead results. If so it will detect it and hide auto suggest. Normally, typeahead wont hide results if user clicks outside auto suggest area. That’s why i added it. For eg. Add this
      setTimeout(function () {
      if (!that.$menu.is(‘:hover’)) {
      alert(“FSD”);
      that.hide();
      }
      },150)

      and type something if you get results in auto suggest by that time click anywhere inside body other than typeahead area. You will see this alert, by that way you can understand how it works.

  • Mc Gill

    August 13, 2012

    Thanks a lot. This works :)

  • Greg Merideth

    August 31, 2012

    Works great on our implementation as well. We had initially just removed blur, now it’s back in.

* required
We no more support old browsers. Kindly upgrade to IE 8, IE 9 or Google Chrome or any modern browsers.