添加颜色以匹配 twitter typeahead 中的文本突出显示答案

【问题标题】：Add color to match text highlighting in twitter typeahead添加颜色以匹配 twitter typeahead 中的文本突出显示
【发布时间】：2014-04-22 17:12:10
【问题描述】：

据我所知，建议框中没有匹配文本样式的配置。有什么我想念的吗？只想为匹配搜索查询的文本着色，而不是粗体它。

【问题讨论】：

标签： twitter-bootstrap-3 typeahead.js typeahead

【解决方案1】：

默认情况下，twitter typeahead.js 将匹配项包装到 <strong> 标签中。所以如果你只是想改变匹配文本的颜色，你可以简单地设置<strong>标签的样式：

strong {
  font-weight: normal;
  color: red;
}

您可能只想在下拉列表中设置<strong> 的样式：

.tt-suggestion strong {
  font-weight: normal;
  color: red;
}

查看演示 -> http://jsfiddle.net/vrs95w3g/

还有一些亮点，你应该能够更改 tagName 和 className，但老实说从来没有让它工作。仍然更喜欢好的旧引导输入:)

这是一个很好的例子，如何在一般情况下设置 typeahead.js 的样式（边框、输入、下拉等）-> https://stackoverflow.com/a/20205623/1407478

【讨论】：

简单而有效。谢谢！
嗨。不知道我的问题是对的。对我来说，（在 * typeahead.js 0.11.1 中）它看起来像是另一个类名：highlight: typeahead.bunle.js 中的“tt-highlight”，如果这有帮助，你可以在变量 defaultClassNames 的定义中获取所有类..
@user3617487，非常感谢您指出这一点！你说得对，选择器错了，应该是tt-suggestion 而不是tt-suggestions。更新了小提琴，还添加了正确的 0.11.1 CSS，但缺少。现在预输入看起来应该是这样的。

【解决方案2】：

上一个，给出模糊高亮的代码

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

上面处理了模糊性。然后您可以遍历所有选择的 2 个元素

提前输入：更改

$('#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);
      });
});

模糊代码的功劳-：https://github.com/bripkens/fuzzy.js

【讨论】：