CODEWITHSUNDEEP
jquery
John
John

Reputation: 65

Filter base on text input

I have a input text for the user enter a text and based on what the user enters in the input field I want to hide in the ol the books (li) that dont have the title or author like the text the user enter in the input text.

<form>  
    <input type=" text" id="search">
  </form>

List of books 

<section id="books">    <ol>
    <li class="book"><p><span class="title">Book 1</span>&ensp;<span class="author">Author 1</span></p></li>

    <li class="book"><p><span class="title">Book 2</span>&ensp;<span class="author">Author 2</span></p></li>

    ....    </ol> </section>

With this the title shows the text, for example "Book 1 Author 1". But do you know how to properly filter the list items based on the text entered in the input text?

function filterBooks(){

    var search = $("#search").val();

    $("#books li").each(function(){

        var title = $(this).text();


    });
}

Upvotes: 0

Views: 97

Answers (3)

SMAKSS
SMAKSS

Reputation: 10520

If you want to check if the substring of your input exists in your book list you can use includes(). Then show and hide your desired elements with show() and hide().

So your code should be something like this:

function filterBooks() {
  var search = event.target.value;
  $("#books li").each(function() {
    if (search) {
      var title = $(this).text().toLowerCase();
      if (title.includes(search)) {
        $(this).show();
      } else {
        $(this).hide();
      }
    } else {
      $(this).show();
    }
  });
}

$('#search').keyup(filterBooks)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input type="text" id="search">
</form>

<section id="books">
  <ol>
    <li class="book">
      <p><span class="title">Book 1</span>&ensp;<span class="author">Author 1</span></p>
    </li>
    <li class="book">
      <p><span class="title">Book 2</span>&ensp;<span class="author">Author 2</span></p>
    </li>
    <li class="book">
      <p><span class="title">Magazine 1</span></p>
    </li>
  </ol>
</section>

Upvotes: 1

Andrew Halpern
Andrew Halpern

Reputation: 514

Working solution: 

function filterBooks(){
    var search = $("#search").val();
    $("#books li").each(function(){
        var title = $(this).text();
        if (search.length > 0) {
          if (title.includes(search)) {
            $(this).show();
          } else {
            $(this).hide();
          }
        } else {
          $(this).show();
        }
    });
}

$("#search").keyup(function() {
  filterBooks();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>  
    <input type=" text" id="search">
  </form>
  
  <section id="books">    <ol>
    <li class="book"><p><span class="title">Book 1</span>&ensp;<span class="author">Author 1</span></p></li>

    <li class="book"><p><span class="title">Book 2</span>&ensp;<span class="author">Author 2</span></p></li>
</ol> </section>

Upvotes: 2

tanmay_garg
tanmay_garg

Reputation: 397

You can use the .includes method JS offers for strings and use jquery's .hide() to set the list items the user does not want to see as hidden:

function filterBooks() {
  var search = $("#search").val();

  $("#books li").each(function(){
    var title = $(this).text();
    if (title.includes() == false) {
      $(this).hide();
    }
  });
}
<form>  
  <input type=" text" id="search">
</form>

<section id="books">    
  <ol>
    <li class="book"><p><span class="title">Book 1</span>&ensp;<span class="author">Author 1</span></p></li>
    <li class="book"><p><span class="title">Book 2</span>&ensp;<span class="author">Author 2</span></p></li>
  </ol>
</section>

Upvotes: 0

Related Questions