Multi-Search

Fiddle for Questions

by Mercy Maya

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>

CSS

.listing-three {
  display: inline-block;
  width: 60px;
}

JavaScript

$("#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");
    }
  });
});