Question

我在我的示例页面上突出显示了插件。它的工作原理是，你输入一个单词，它会突出显示，你可以将它与空格分开，并插入另一个突出显示的单词..

我的新问题，对我来说看起来没有解决，是我想要两个输入。首先用一种颜色突出显示单词，用第二种输入突出显示另一种颜色的颜色。

到目前为止，我的情况如下：http://jsfiddle.net/cfYrt/4/

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 ) {
        var terms = searchTerm.split(/\W+/);
       $.each(terms, function(_, term){
              // highlight the new term
        term = term.trim();
        if(term != "")
           $('body').highlight(term);
        });                          

    }
});
});

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;
}

field2 coud中输入的相应值是否可以用不同于field1的颜色的文本着色？是否有可能使用此插件，无论它是从其核心代码调用类.highlight？

Answer 1

为此，插件不够可扩展。但您可以修改插件中的某些部分并稍微更改实现。

插件的变化：

jQuery.fn.highlight = function (pat, className) { //take the classname too

 //somecode
if (pos >= 0) {
   var spannode = document.createElement('span');
   spannode.className = className || 'highlight'; //set the classname as specified else default to 'highlight'

//somecode

jQuery.fn.removeHighlight = function (classNames) { //have it take the selectors to be removed either an array if multiple highligh selector removal or just pass in a single slector string.

 // some code

 var selectors = classNames;
 if(Object.prototype.toString.call(classNames) === '[object Array]')
  selectors = classNames.join(',');

//Some Code

return this.find(selectors).each(function () { //Apply to remove highlight wrapper

用法

 $('body').removeHighlight(['span.highlight1', 'span.highlight2']); //array of selector

或

 $('body').removeHighlight('span.highlight1');

要突出显示，请使用classname

$('body').highlight(term, 'highlight1');

jquery突出显示，多个输入不同的颜色

1 个答案:

用法

Demo