Bootstrap Typeahead click event

Question

我使用bootstrap-typeahead.js v2.0.0進行自動完成搜索。我有一個單擊事件來查看結果，但它只能運行10次之一，在另一種情況下，我得到一個錯誤：「Uncaught SyntaxError：Unexpected token u」。

我環顧四周，發現這個：https://github.com/twitter/bootstrap/issues/4018，我嘗試瞭解決方案，但似乎沒有任何工作。當我使用enter鍵時，它非常完美，所以它必須是關於click事件的東西。任何人都有同樣的問題？ 代碼：

$('#search').typeahead({ 

     source: function (typeahead, query) { 
       $.ajax({ 
        type: "GET", 
        url: "search/" + query, 
        success: function (data) { 
         searchResult = data; 
         return typeahead.process(data); 
        }, 
        error: function (xhr, ajaxOptions, thrownError) { 
         console.log(thrownError); 
        } 
       }); 
     } 
     }, 
     onselect: function (obj) { 
      window.location.href = "view/" + obj.id; 
     }, 
     items: 8, 
     minLength: 1, 
     highlighter: function (item) { 
     var artist = _.find(searchResult, function (a) { 
      return item === a.value; 
     }); 
     return ('<li>' + artist.value + ' (' + artist.dbirth + '-' + artist.ddeath + ')<li>'); 
     } 
    }); 

Answer 1

好吧我自己解決了。這是你必須做的：

打開引導-typeahead.js並找到203行中的聽法修改如下：

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

這裏唯一的區別是，我添加了一個監聽器「鼠標離開」。

轉到278行的mouseenter方法，並將其改成這樣：

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

然後添加一個名爲「鼠標離開」的新方法，並添加以下代碼：

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

希望這將有助於任何有類似問題的人。

Answer 2

這是一個更簡單的解決方案。 「模糊」事件在點擊事件之前綁定。簡單地爲模糊添加延遲，這將解決問題。

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

額外的200毫秒內給出足夠的時間用於「點擊」綁定到鼠標點擊執行。