Highlighting a keyword which is entered in a search box in a webpage

Question

I used this:

$('#srch').click(function(){
  var s='';
  s = $('#gt').val();
  if (s == '')
  {
    $("p") .addClass("default");
  } else {
    $("p:contains('"+ s +"')") .addClass("active");
  }
});

Its working but it keep on storing the previous data. I want the previous data to be cleared.

Please see this - [http://stackoverflow.com/questions/10011385/jquery-search-in-static-html-page-with-highlighting-of-found-word](http://stackoverflow.com/questions/10011385/jquery-search-in-static-html-page-with-highlighting-of-found-word) — Balraj Singh, Apr 20 '17 at 10:23
Please see this - [http://stackoverflow.com/questions/10011385/jquery-search-in-static-html-page-with-highlighting-of-found-word](http://stackoverflow.com/questions/10011385/jquery-search-in-static-html-page-with-highlighting-of-found-word) — Balraj Singh, Apr 20 '17 at 10:26

score 1 · Answer 1 · answered Apr 20 '17 at 10:20

1

Use removeClass() to remove the highlighted element class

$('#srch').click(function(){
$("p").removeClass("active"); 
...
}

answered Apr 20 '17 at 10:20

madalinivascu

32,064
4
39
55

score 0 · Answer 2 · answered Apr 20 '17 at 10:20

To clear input after search just use $(...).val(''):

$('#srch').click(function(){
    var s='';   
    s = $('#gt').val();
    $('#gt').val('');
    if (s == ''){       
        $("p") .addClass("default");    
    } else{
        $("p:contains('"+ s +"')") .addClass("active"); 
    }
});

score 0 · Answer 3 · answered Apr 20 '17 at 10:35

0

Check this

 $('#srch').on("click",function(){
    var s = $('#gt').val();
    $("p").removeClass("active")
    if (s == ''){       
        $("p").addClass("default");    
    } else{
        $("p:contains('"+ s +"')").addClass("active"); 
    }
});

Working Fiddle Demo

answered Apr 20 '17 at 10:35

S B

1,363
12
21

Thanks! It worked. But its not working in online server. How to do that? – Aditya_kr Apr 20 '17 at 17:54
Send me online link, will check – S B Apr 21 '17 at 03:53
i cant! actually the site is incomplete, its under testing phase. so cant reveal it right now. – Aditya_kr Apr 21 '17 at 18:59

score 0 · Answer 4 · answered Apr 20 '17 at 10:36

Using ternary operator you can do this in single line .

$('#srch').click(function(){
    $("p") .removeClass("active") ;
    var s='';   
    s = $('#gt').val();
    s == ''?  $("p") .addClass("default")  : $("p:contains('"+ s +"')") .addClass("active"); 
});

.default {
  background: green;
}
.active {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>This is a test contain</p>
<input type='text' id='gt'/>
<input type='button' id='srch'>

Highlighting a keyword which is entered in a search box in a webpage

4 Answers4