Twitter引导程序突出显示任何单词

Question

使用Twitter Boostrap TypeAhead和MVC4 - 有什么方法可以更改用于预先输入的javascript，以突出显示搜索框中的任何单词，而不是搜索框中的确切内容，例如。如果我键入Outlook，它会突出显示下拉列表中的4个项目中的Outlook：

但是，如果我输入“outlook access”（出现在上面的第4项） - 它是从我的控制器返回JSON，但是，TypeAhead不显示它，因为“Outlook access”不会显示为一个字符串在条目中：

我怀疑答案在这里（打字式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方法以按原样返回项目。