我已经设置了一个插件来突出显示输入中输入的单词。 你可以在jsfiddle中看到它:http://jsfiddle.net/K5PmD/
它可以工作，但我正在尝试修改插件，如果您输入例如“Donec”并且它被突出显示，您可以在“Donec”之后的同一输入中按空格并输入例如“Mauris”和然后该单词也会与第一个单词一起突出显示，即使它们不在文本中彼此对应(“....Donec Mauris...”)，而是在文本中的某个位置。
html:
<body>
<input type="text" class="span1 disabled" id="field1" name="field1"><br>
<p>
Vestibulum rhoncus urna sed urna euismod, ut cursus eros molestie.
Nulla sed ante ut diam gravida auctor eu quis augue.
Donec eget diam malesuada, consectetur orci at, ultrices tellus.
Duis id dui vel sem consequat rutrum eget non orci.
Nullam sit amet libero odio. Vestibulum sapien sapien,
molestie quis porta nec, sodales nec felis.
Mauris vehicula, erat eu consectetur viverra,
dui tellus laoreet dolor, quis faucibus turpis eros non mi.
</p>
</body>
脚本:
$(function() {
$('#field1').bind('keyup change', function(ev) {
// pull in the new value
var searchTerm = $(this).val();
// remove any old highlighted terms
$('body').removeHighlight();
// disable highlighting if empty
if ( searchTerm ) {
// highlight the new term
$('body').highlight( searchTerm );
}
});
});
CSS
.highlight {
background-color: #fff34d;
-moz-border-radius: 5px; /* FF1+ */
-webkit-border-radius: 5px; /* Saf3-4 */
border-radius: 5px; /* Opera 10.5, IE 9, Saf5, Chrome */
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* FF3.5+ */
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* Saf3.0+, Chrome */
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* Opera 10.5+, IE 9.0 */
}
.highlight {
padding:1px 4px;
margin:0 -4px;
}
这个插件有可能的解决方案吗？或者你可以建议一些其他更好的插件来满足我的愿望？
你可以更新我的jsfiddle，如果有什么的话可以发回来......
最佳答案
您使用的插件非常简单，并且严格不采用字符串数组来匹配，也不进行单词分隔本身。但通常这是自然的匹配方式。但是您可以通过分离单词并自己调用突出显示来在代码中处理它。
$(function() {
$('#field1').bind('keyup change', function(ev) {
// pull in the new value
var searchTerm = $(this).val();
// remove any old highlighted terms
$('body').removeHighlight();
// disable highlighting if empty
if ( searchTerm ) {
var terms = searchTerm.split(/\W+/);
$.each(terms, function(_, term){
$('body').highlight(term.trim());
});
}
});
});
Demo
这是另一个plugin您可以使用它来突出显示字符串数组。
关于jquery 高亮搜索以空格分隔的多个单词，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16992193/