Twitter Bootstrap突出顯示任何詞

Question

使用Twitter Boostrap TypeAhead與MVC4 - 有沒有什麼辦法可以改變javascript的typeahead，突出顯示搜索框中的任何單詞，而不是搜索框中的確切內容。如果我鍵入Outlook，它在下拉的4項突出展望：

但是，如果我輸入「訪問Outlook」（出現在上述第4項） - 這是在返回從我的控制器JSON，但是，提前鍵入不作爲「瞭望訪問」不會出現在條目一個字符串顯示出來：

我懷疑答案就在這裏（預輸入JS），但不能肯定的：

, highlighter: function (item) { 
    var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&') 
    return item.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) { 
    return '<strong>' + match + '</strong>' 
    }) 
} 

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

    items.first().addClass('active') 
    this.$menu.html(items) 
    return this 
} 

感謝您的幫助，

馬克

Answer 1

要改寫matcher返回所有結果，加入這個以您的預輸入選項：

matcher: function(item) { return true; } 

默認情況下，它做了基本字符串匹配將其過濾掉，但由於您的控制器已經返回了您想要的項目，因此可以將它們全部顯示出來。

這將獲得顯示的項目，雖然熒光筆不會突出顯示任何內容，因爲沒有找到「outlook access」。您可以通過類似的方式通過選項覆蓋highlighter方法。如果控制器按特定順序返回結果，則您可能還想覆蓋sorter方法以按原樣返回項目。