Twitter bootstrap 3 添加颜色以匹配twitter typeahead中的文本突出显示

据我所知，建议框中没有匹配文本样式的配置。有什么我遗漏的吗？只想给匹配搜索查询的文本上色，而不是加粗。

默认情况下，twitter typeahead.js将匹配项包装到

标记中。因此，如果您只想更改匹配文本的颜色，只需设置

标记的样式即可：

strong{
字体大小：正常；
颜色：红色；
}

您可能只想在下拉列表中设置

：

.tt强烈建议{
字体大小：正常；
颜色：红色；
}

请参见演示->

还有一些亮点，您应该能够更改标记名和类名，但老实说，从来没有让它起作用。仍然更喜欢好的旧引导类型：）

---

顺便说一句，这里有一个很好的例子，说明如何对typeahead.js（边框、输入、下拉列表等）进行总体样式设置-->

将上升一个，并给出模糊高亮显示的代码

function fuzzyMe(term, query) {
  var score = 0;
  var termLength = term.length;
  var queryLength = query.length;
  var highlighting = '';
  var ti = 0;
  // -1 would not work as this would break the calculations of bonus
  // points for subsequent character matches. Something like
  // Number.MIN_VALUE would be more appropriate, but unfortunately
  // Number.MIN_VALUE + 1 equals 1...
  var previousMatchingCharacter = -2;
  for (var qi = 0; qi < queryLength && ti < termLength; qi++) {
    var qc = query.charAt(qi);
    var lowerQc = qc.toLowerCase();

    for (; ti < termLength; ti++) {
      var tc = term.charAt(ti);

      if (lowerQc === tc.toLowerCase()) {
        score++;

        if ((previousMatchingCharacter + 1) === ti) {
          score += 2;
        }

        highlighting += "<em>" + tc + "</em>";
        previousMatchingCharacter = ti;
        ti++;
        break;
      } else {
        highlighting += tc;
      }
    }
  }

  highlighting += term.substring(ti, term.length);

  return {
    score: score,
    term: term,
    query: query,
    highlightedTerm: highlighting
  };
}

---

模糊代码的信用-：

简单而有效。谢谢你好我不知道，我答对了问题。对我来说，（在*typeahead.js 0.11.1中）它看起来像是另一个类名：highlight:typeahead.bunle.js中的“tt highlight”，如果这有帮助的话，您可以在变量defaultClassNames的定义中获得所有类。@user3617487，非常感谢您指出这一点！你是对的，选择器是错的，应该是

tt-suggestion

而不是

tt-suggestions

。已经更新了小提琴，还添加了丢失的正确的0.11.1 CSS。现在，前面的字体看起来应该是这样的。

$('#search-bar').typeahead({....}).on('change', function(e) {                     
    var query = $('#search-bar').typeahead('val'); 
     $(".tt-suggestion.tt-selectable .name").each(function() {
        var term = $(this).text();
        $(this).html(fuzzyMe(term, query).highlightedTerm);
      });
});