Question

我已经设置了一个插件，用于突出显示在输入中输入的单词。你可以在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并将其发回....

Answer 1

您正在使用的插件非常简单，并且严格地说不会使字符串数组匹配，也不会分隔字本身。但通常这是自然的匹配方式。但是你可以通过分离单词并自己调用高亮来在代码中处理它。

$(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突出显示搜索与空格分隔的多个单词

1 个答案:

Demo