CODEWITHSUNDEEP
jqueryinputcolorshighlight
dzordz
dzordz

Reputation: 2317

jquery highlighting, multiple inputs different color

I have highlighting plugin up an working on my example page. It works so whey you enter an word it gets highlighted and you can separate it with space and insert another word which gets highlighted to..

My new problem, which for me looks unresolved, is that I wanna for example two inputs. Word in first gets highlighted with one color and those in second input gets colored by another color..

I have situation till now here: 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>

script:

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

can the corresponding values on input in field2 coud get colored in text with different color than those from field1? Is it possible with this plugin no matter of fact that it's calling class .highlight from its core code?

Upvotes: 0

Views: 313

Answers (1)

PSL
PSL

Reputation: 123739

For this, the plug in is not extensible enough. But you can modify some sections in the plugin and change the implementation a little bit.

Changes in plugin:

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

Usage

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

or 

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

For highlighting give the classname to be used

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

Demo

Upvotes: 2

Related Questions