使用Typeahead.js高亮显示多个单词

Question

使用Typeahead.js高亮显示多个单词

javascriptsearchautocompletetypeahead.js

5

我正在使用typeahead.js进行自动完成，就像这个官方示例一样。当我搜索“rh”时，结果为“Rhode Island”（匹配的字符被突出显示）。当我搜索“rh is”时，结果为“Rhode Island”（没有任何突出显示）。如何解决这个问题？期望的结果是：“Rhode Island”。P.S. 如果需要修改源代码，那么对我来说也没问题。

- starshine wang

可能是问题的重复，参见这里。 - Tal Ben Shabtay

谢谢。但是该链接是针对Bootstrap v2.3之前的typeahead组件，而在Typeahead.js中可能没有相应的函数可以覆盖。 - starshine wang

2个回答

-1

我认为如果你在_.escapeRegExChars()助手中使用的正则表达式中添加\s模式，它将解决你的问题（请参见这里）。

我不确定，因为我现在不在我的笔记本电脑上回答，无法进行测试，但你可以尝试一下并让我知道结果。

- absolux

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- dude · Accepted Answer

类型提醒的默认集成高亮组件不够智能，无法满足您的要求。

我会给您举一个例子，使用 mark.js，这是一个用于搜索词语/关键字或自定义正则表达式的文本高亮器。请访问网站了解更多 API 信息。

演示 JSFIDDLE

$(function() {
  // constructs the suggestion engine
  var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
    'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
    'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
    'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
    'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
    'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
    'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
    'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
    'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming', 'take bag'
  ];
  var states = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.whitespace,
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    // `states` is an array of state names defined in "The Basics"
    local: states
  });

  // Initialize typeahead with mark.js
  var $context = $("#bloodhound");
  $context.find(".typeahead").typeahead({
    hint: true,
    // disable integrated typeahead component
    highlight: false,
    minLength: 1
  }, {
    name: 'states',
    source: states
  }).on("typeahead:render", function() {
    // highlight matches with mark.js
    var searchTerm = $(this).val();
    $context.find(".tt-menu").mark(searchTerm);
  });
});

input {
  width: 250px;
  padding: 3px;
}

mark {
  background: yellow;
  color: black;
}

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdn.rawgit.com/julmot/mark.js/6.1.0/dist/jquery.mark.min.js"></script>
<script src="https://cdn.rawgit.com/twitter/typeahead.js/v0.11.1/dist/typeahead.bundle.min.js"></script>
<!-- Demo taken from http://twitter.github.io/typeahead.js/examples/ -->
<div id="bloodhound">
  <input class="typeahead" type="text" placeholder="States of USA. Type in 'rh is' or 'bag take'">
</div>

首先，您需要禁用默认的集成高亮组件（默认情况下已禁用）。然后，您需要监听渲染器事件，并在类型提示的建议上初始化mark.js。