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

问题描述 投票:3回答:2

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

twitter-bootstrap-3 typeahead.js typeahead
2个回答
5
投票

默认情况下,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


1
投票

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

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

© www.soinside.com 2019 - 2024. All rights reserved.