CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Dryden Long
Dryden Long

Reputation: 10182

Adding class to match() results

I have the following code that will search for text on a page and filter the results:

$('#searchbox').on('input', function() {
  var searchWord = $('#searchbox').val().toUpperCase();
  $('.searchParent').each(function() {
    var par = $(this);
    if ($(this).find('.searchMe').text().toUpperCase().match(searchWord) || searchWord == '') {
      $(par).fadeIn();
    } else {
      $(par).fadeOut();
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="searchbox">

<div class="searchParent">
  <span class="searchMe">A</span>
  <span class="searchMe">1</span>
</div>
<div class="searchParent">
  <span class="searchMe">B</span>
  <span class="searchMe">2</span>
</div>
<div class="searchParent">
  <span class="searchMe">C</span>
  <span class="searchMe">3</span>
</div>

How can I go about adding a class to the .searchMe container where the text was found?

I've tried using parent(), but since the results of match() return the string itself, and not the element that contains it, that doesn't work. Any suggestions?

Upvotes: 0

Views: 43

Answers (2)

gaganshera
gaganshera

Reputation: 2639

Try this:

$('#searchbox').on('input', function() {
  var searchWord = $('#searchbox').val().toUpperCase();
  $('.searchParent').each(function() {
    var par = $(this);
    if ($(this).find('.searchMe').text().toUpperCase().match(searchWord) || searchWord == '') {
      $(par).fadeIn();
      $(this).find('.searchMe').addClass('found');
      if(searchWord == '') {
        $(this).find('.searchMe').removeClass('found');
      }
    } else {
      $(par).fadeOut();
      console.log(2)
    }
  });
});
.found{
  color:red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="searchbox">

<div class="searchParent">
  <span class="searchMe">A</span>
  <span class="searchMe">1</span>
</div>
<div class="searchParent">
  <span class="searchMe">B</span>
  <span class="searchMe">2</span>
</div>
<div class="searchParent">
  <span class="searchMe">2</span>
  <span class="searchMe">3</span>
</div>

Upvotes: 1

Joseph Marikle
Joseph Marikle

Reputation: 78520

You could use .filter() instead.

$('#searchbox').on('input', function() {
  var searchWord = $('#searchbox').val().toUpperCase();
  $('.searchParent').each(function() {
    var par = $(this);
    $(this).find('.searchMe').removeClass('found').filter(function(){
      return searchWord != '' && $(this).text().toUpperCase().match(searchWord);
    }).addClass('found');
  });
});
.found{color: green;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="searchbox">

<div class="searchParent">
  <span class="searchMe">A</span>
  <span class="searchMe">1</span>
</div>
<div class="searchParent">
  <span class="searchMe">B</span>
  <span class="searchMe">2</span>
</div>
<div class="searchParent">
  <span class="searchMe">C</span>
  <span class="searchMe">3</span>
</div>

Upvotes: 1

Related Questions