pattern-matching - Jquery Autocomplete 突出显示不匹配的文本，如谷歌

Question

我正在使用 jQuery Autocomplete 插件，我想实现与 Google 的自动完成功能相同的内容：

我已经搜索过这个，但是所有的例子都在显示，我怎样才能突出显示匹配的单词，但我想要相反的一个：

例如，如果我输入： acc -> I would like to have acc ount , acc ount manager

有人对此有一些解决方案吗？

谢谢尼克

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