jQuery的自動完成hightlight不匹配的文字像谷歌

Question

我使用jQuery自動完成插件，我想實現像谷歌的自動完成功能相同thign：

...我已經尋找這一點，但所有的例子都顯示，我怎麼能突出匹配的詞，但我想oposite一個：

例如，如果我輸入：ACC - >我想有ACC 'mount，ACC 'mount經理

有有人爲此解決一些問題？

感謝 聶

Answer 1

這似乎是一個CSS問題。我將以Twitter Bootstrap Typeahead爲例。

這些都是重要的插件默認：

menu: '<ul class="typeahead dropdown-menu"></ul>' 
item: '<li><a href="#"></a></li>' 

熒光筆僅包裝突出部分的標籤，像這樣：

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

一個簡單的預輸入會是什麼樣子：

<ul class="typeahead dropdown-menu"> 
    <li><a href="#"><strong>test</strong>ing</a></li> 
</ul> 

這意味着在最簡單的設置中，您可以添加一些基本的CSS，如

.typeahead > li > a { 
font-weight: bold; 
} 

.typeahead > li > a strong { 
font-weight: normal; 
}