Mercy Maya Games Mercy Maya Games - 7 months ago 5
Javascript Question

Multipe JQuery Searches in a single page

I have a page that will ultimately have 10 different UL's with multiple DIV's in each LI which should have each DIV inside the LI's be searchable. Each searchbox should be searching it's own UL individually without affecting the other UL's in the page. The solution that I am currently using is to replicate the search code while incrementing the selectors numerically. This creates a lot of redundancy.

How can I limit the redundancy and have each search still only affect it's own UL?

The following is the incremented code (Only twice instead of all 10 for the sake of brevity):

The HTML:

<h1>Search One</h1>
<input type="text" id="search1" value="" placeholder="enter search text" />

<div id="results1">
<ul>
<li>
<div class="listing-three">Apple</div>|
<div class="listing-three">Banana</div>|
<div class="listing-three">Cherry</div>
</li>
<li>
<div class="listing-three">Apple</div>|
<div class="listing-three">Banana</div>|
<div class="listing-three">Cucumber</div>
</li>
<li>
<div class="listing-three">Apple</div>|
<div class="listing-three">Berry</div>|
<div class="listing-three">Cheese</div>
</li>
</ul>
</div>
<h1>Search Two</h1>
<input type="text" id="search2" value="" placeholder="enter search text" />

<div id="results2">
<ul>
<li>
<div class="listing-three">Apple</div>|
<div class="listing-three">Banana</div>|
<div class="listing-three">Cherry</div>
</li>
<li>
<div class="listing-three">Apple</div>|
<div class="listing-three">Banana</div>|
<div class="listing-three">Cucumber</div>
</li>
<li>
<div class="listing-three">Apple</div>|
<div class="listing-three">Berry</div>|
<div class="listing-three">Cheese</div>
</li>
</ul>
</div>


The JQuery

$("#search1").keyup(function() {
var searchText = $(this).val().toLowerCase();
$("#results1 li").each(function() {
console.log($(this).text());
var string = $(this).text().toLowerCase();
if (string.indexOf(searchText) != -1) {
$(this).show("slow");
} else {
$(this).hide("slow");
}
});
});

$("#search2").keyup(function() {
var searchText = $(this).val().toLowerCase();
$("#results2 li").each(function() {
console.log($(this).text());
var string = $(this).text().toLowerCase();
if (string.indexOf(searchText) != -1) {
$(this).show("slow");
} else {
$(this).hide("slow");
}
});
});


I have included a Fiddle for ease of explanation and clarity of functionality.

https://jsfiddle.net/MercyMayaGames/1pbwc98j/

Answer

In the input box, give an attribute to indicate which list it is for

<input type="text" id="search1" value="" placeholder="enter search text" class="searcher" data-search-in="results1"/> 

Notice last two attributes class and data-search-in

Now you can refactor the code as

$(".searcher").keyup(function() {
  var searchText = $(this).val().toLowerCase();
  var searchIn = $(this).attr("data-search-in");
  $("#" + searchIn + " li").each(function() {
    console.log($(this).text());
    var string = $(this).text().toLowerCase();
    if (string.indexOf(searchText) != -1) {
      $(this).show("slow");
    } else {
      $(this).hide("slow");
    }
  });
});