使用 Typeahead.js 突出显示多个单词

Question

我使用typeahead.js 进行自动补全，就像在this official example 中一样。

当我搜索“rh”时，结果为“Rhode Island”（匹配的字符被高亮显示）。

当我搜索“rh is”时，结果是“罗德岛”（没有任何突出显示）。我怎样才能让它工作？预期结果：“Rhode Island”。

附：如果这需要修改source code，那么这对我来说没问题。

Answer 1

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

我不确定，因为我不是通过笔记本电脑回答问题，也无法进行测试，但您现在可以尝试让我这样做。

Answer 2

typeahead 的默认集成突出显示组件不够智能，无法满足您的要求。

我给你一个例子，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>

首先，您必须禁用默认的集成突出显示组件（默认禁用）。然后，您必须监听渲染器事件并根据 typeahead 的建议初始化 mark.js。