CODEWITHSUNDEEP
jqueryinputhighlightwords
dzordz
dzordz

Reputation: 2317

jquery highlight on search of multiple words separated with space

I have set up a plugin for highlighting of word which is entered in input. You could see it in jsfiddle: http://jsfiddle.net/K5PmD/

It works but I'm trying to modify the plugin in the way that if you enter for example 'Donec' and it gets highlighted you could press space in the same input after 'Donec' and enter for example 'Mauris' and then that word gets highlighted too, along with first word, even they are not in the text one to each other ("....Donec Mauris...") but somewhere around in the text.

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 ) {
        // 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;
}

Is there a possible solution with this plugin? Or you could suggest some other better plugin for my wish?

You can update my jsfiddle and post it back if you have anything....

Upvotes: 1

Views: 3043

Answers (1)

PSL
PSL

Reputation: 123739

Plugin that you are using is very simple and strictly doesn't take an array of strings to match nor it does the word separation itself. But generally that is natural way of matching. But you can probably handle it in your code by separating out words and calling highlight yourself.

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

here is another plugin that you can use which does take array of strings to be highlighted.

Upvotes: 4

Related Questions