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

Posted 2021-05-05

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

答案

默认情况下，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，但老实说，从来没有让它工作。仍然喜欢好旧的bootstrap typeahead :)

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

另一答案

要上去，并给出模糊突出显示的代码

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

以上照顾了模糊性。然后你可以迭代你所有的select 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