我正在使用typeahead.js进行自动完成,就像这个官方示例一样。当我搜索“rh”时,结果为“Rhode Island”(匹配的字符被突出显示)。 当我搜索“rh is”时,结果为“Rhode Island”(没有任何突出显示)。如何解决这个问题?期望的结果是:“Rhode Island”。P.S. 如果需要修改源代码,那么对我来说也没问题。
类型提醒的默认集成高亮组件不够智能,无法满足您的要求。
我会给您举一个例子,使用 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>
searchTerm
与例如 "a" 进行比较,在这种情况下不初始化 mark.js。 - dude我认为如果你在_.escapeRegExChars()
助手中使用的正则表达式中添加\s
模式,它将解决你的问题(请参见这里)。
我不确定,因为我现在不在我的笔记本电脑上回答,无法进行测试,但你可以尝试一下并让我知道结果。