1

我已经设置了一个插件，用于突出输入输入的单词。您可以在 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 并在有任何内容时将其发回......

4

1 回答 1

4

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

$(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());
            });                          

        }
    });
});

演示

这是您可以使用的另一个插件，它确实需要突出显示字符串数组。

于 2013-06-07T20:33:11.247 回答