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

Question

我正在使用typeahead.js进行自动补全，就像在这个官方示例中一样。

当我搜索“RH”这个结果“ 的Rh颂岛”（匹配字符highligted）。

当我搜索“ rh is”时，这将导致“ Rhode Island”（没有任何突出显示）。我该如何工作？预期结果：“ 铑颂是土地”。

PS：如果这需要修改源代码，那么对我来说这是确定的。

Answer 1

默认的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>

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