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

Question

我正在使用 typeahead.js用于自动完成，就像在 this official example 中一样.

当我搜索“rh”时，结果是“Rhode Island”(匹配字符高亮显示)。

当我搜索“rh is”时，结果是“Rhode Island”(没有任何突出显示)。我怎样才能让它工作？预期结果:“Rhode Island”。

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

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>

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