Bootstrap Typeahead Click Event

I'm using bootstrap-typeahead.js v2.0.0 for an autocomplete search. I have a click event to view the result but it only works like 1 of 10 times, in the other case I get an error:

Solution 1:

Okay I solved it myself. This is what you have to do:

Open bootstrap-typeahead.js and find the listen method on row 203 and modify like this:

    listen: function () {
    this.$element
    .on('blur',     $.proxy(this.blur, this))
    .on('keypress', $.proxy(this.keypress, this))
    .on('keyup',    $.proxy(this.keyup, this))

    // if ($.browser.webkit || $.browser.msie) {
    this.$element.on('keydown', $.proxy(this.keypress, this))
    // }

    this.$menu
    .on('click', $.proxy(this.click, this))
    .on('mouseenter', 'li', $.proxy(this.mouseenter, this))
    .on('mouseleave', 'li', $.proxy(this.mouseleave, this))
    }

The only difference here is that I added a listener on 'mouseleave'.

Go to the mouseenter method on row 278 and change it to this:

mouseenter: function (e) {
      $(e.currentTarget).addClass('active')
    }

Then add a new method named 'mouseleave' and add this code:

mouseleave: function () {
      this.$menu.find('.active').removeClass('active')
}

Hopefully this will help anyone with a similar problem.

Solution 2:

Here is a much simpler solution. The "Blur" event binds before the click event. Simply add a delay for the blur and this will fix the problem.

<input type="text" placeholder="Enter a Name" onblur="hidesuggest();" id="suggestbox">
<script>
function hidesuggest(){
    setTimeout("$('#suggestbox').toggle();",200);
}
</script>

The extra 200 milliseconds gives enough time for the "click" binding to execute on the mouse click.