Jquery simple search suggestion text highlight

Question

I am trying to make a simple jQuery word search based on an input of type text and highlighting text. How can I do this for multiple words? This code is only working for a single character.

Html

<input type="text"/>

<div>John Resig
    George Martin
    Malcom John Sinclair
    J. Ohn 
    Sample text
</div>

CSS

span {    
    background : red 
}

JS

$("input").keyup(function() {
     var mysearchword = $("input:text").val();    
     var word = mysearchword;
     $( "div:contains('"+word+"')" ).html(function(i,html) {
         var re = new RegExp(word,"g");
         return html.replace(re,'<span>'+word+'</span>')
     });
});

JsFiddle

Is this answer of any help to you?http://stackoverflow.com/questions/8644428/how-to-highlight-text-using-javascript — Tony, Jun 30 '15 at 08:56
This tutorial also looks helpful: http://www.the-art-of-web.com/javascript/search-highlight/ — Tony, Jun 30 '15 at 08:59
Try to read this: http://stackoverflow.com/questions/7571117/jquery-something-like-contains-but-to-match-exactly-phrase — Teo, Jun 30 '15 at 08:59
Take advantage of what HTML5 offers you, and use `` to highlight your results, instead of `` — Jose Rui Santos, Jun 30 '15 at 09:35

Arun P Johny · Accepted Answer · 2015-06-30T12:49:07.463

10

If you have a predefined set of elements to target then

var $para = $('.para')
$("input").keyup(function() {
  $para.find('span.highlight').contents().unwrap();
  var mysearchword = this.value.trim();
  if (mysearchword) {
    var re = new RegExp('(' + mysearchword.trim().split(/\s+/).join('|') + ')', "gi");
    $para.html(function(i, html) {
      return html.replace(re, '<span class="highlight">$1</span>')
    });
  }
});

span.highlight {
  background: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" />
<div class="para">John Resig George Martin Malcom John Sinclair J. Ohn Sample text</div>

edited Jun 30 '15 at 12:49

answered Jun 30 '15 at 09:03

Arun P Johny

384,651
66
527
531

Thanks Arun. this is working fine. but tags displaying when Iam deleting input text what I have typed. – PRANAV Jun 30 '15 at 09:28
@user3927335 can you give a case to recreate the issue - http://jsfiddle.net/arunpjohny/hnvzrcb3/3/ – Arun P Johny Jun 30 '15 at 09:31
Better to simply use `var mysearchword = this.value;` instead of `var mysearchword = $("input:text").val();` that might select values from other `input` elements as well. – Jose Rui Santos Jun 30 '15 at 09:32
for Eg: when adding 'John Re' working fine. if you delete entered text with backspace then the content displaying tags – PRANAV Jun 30 '15 at 12:42
1

@user3927335 see the update... the issue was when there is no search text – Arun P Johny Jun 30 '15 at 12:49

score 0 · Answer 2 · answered Jun 30 '15 at 09:00

I have modified your code a little bit, and able to achieve what you need. I am not sure of the performance though.

Html

<input type="text" id="inputText" />
<div id="sampleText">
   John Resig George Martin Malcom John Sinclair J. Ohn Sample text
</div>

JS

$("input").keyup(function () {

   var mysearchword = $(this).val();
   var word = mysearchword;
   var textInDiv = $("#sampleText").text();
   if (textInDiv.indexOf(word) > 0) {
      var re = new RegExp(word, "g");
      $("#sampleText").html(textInDiv.replace(re, '<span>' + word +'</span>'));
   };
});

Jquery simple search suggestion text highlight

2 Answers2