how to filter elements by name

Question

I have 3 movies, (Annihilation, Bomb x City and The Commuter), i don't know hot to put javascript code so when i start to search like for "ann" that only annihilation movie box appear and other not displayed...like filtering...please help i am not so good at this stuff and i want to learn.Thanks in advance.

<header>
  <div class="container">
    <div id="branding">
      <h1><span id="logo">mov</span>BLANK</h1>
    </div>
    <nav>
      <ul>
        <input type="text" id="filterInput" placeholder="Search...">
        <li class="current"><a href="index.html">Home</a></li>
        <li><a id="newprojection" href="./html/newprojection.html">New projection</a></li>
        <li><a id="buyticket" href="./html/buyticket.html">Buy a Ticket</a></li>
        <li><a id="newuser" href="./html/newuser.html">New user</a></li>
        <li><a id="loginbtn" href="./html/login.html">Log in</a></li>
        <li>
          <a id="buy" href="#"></a>
        </li>
      </ul>
    </nav>
  </div>
</header>

<section id="boxes">
  <div id="div1" class=".container">
    <div id="annihilation" class="moviebox">
      <a class="moviea" href="./html/annihilation.html"><img src="./img/movie1.jpg"></a>
      <a id="delete" href="#">X</a>
      <h3 class="moviea">Annihilation</h3>
      <p class="moviea">Genre: Adventure, Fantasy</p>
    </div>
    <div id="bombcity" class="moviebox">
      <a class="imgmovie" href="./html/bombcity.html"><img src="./img/movie2.jpg"></a>
      <a id="change" href="#">X</a>
      <h3 class="namemovie">Bomb City</h3>
      <p class="genremovie">Genre: Action, Crime</p>
    </div>
    <div id="commuter" class="moviebox">
      <a class="imgmovie" href="./html/commuter.html"><img src="./img/movie3.jpg"></a>
      <a id="buy2" href="#">X</a>
      <h3 class="namemovie">The Commuter</h3>
      <p class="genremovie">Genre: Action, Drama</p>
    </div>
    <div id="bookmarksResults"></div>
  </div>
</section>

Answer 1

I would add the attribute onkeyup to your input element and set it equal to a function that looks at the input text, and then loops through your moviebox div elements and hides them if the h3 element text does not contain the input value.

Example:

<input type="text" id="filterInput" placeholder="Search..." onkeyup="filterTable(this)" />

function filterTable(input) {
    var search = input.value;
    var movieDivs = document.querySelectorAll('div.moviebox');
    for (var i = 0; i < movieDivs.length; i++;) {
        var h3 = movieDivs[i].querySelector('h3');
        if (h3.innerText.indexOf(search) >= 0)
            movieDivs[i].style.display = '';
        else
            movieDivs[i].style.display = 'none';
    }
}

Answer 2

Here is what I came up with. this is a good little project to learn some JS! you should try doing something next where you automate the creation of the html given an array of movies. It might be a bit heavy for what you're doing, but React is a neat JS library that's worth looking into and learning about.also be careful about classnames with a . in them. You usually dont want to do that. (looking at your container class)

// grab all the movies
let movies = document.getElementsByClassName('moviebox');
//this returns an object we want an array
//with all the names in it. so lets call OBject.keys() which will
//return an array with all the keys of this object
movies = Object.keys(movies)
  .map(key => movies[key].id);
// what we did was loop through the keys, (0,1,2) and index into the object with them (movies[key]). then since hte id is the name of the movie it seems, we just grab the id (movies[key].id) we then save this update array into the already defined movies array.
console.log(movies);
//^ check it out, there are the list of movies, dynamically grabbed!

//lets define a function that will hide a movie given its name.
//this is a super basic function but it does one thing well.
function hideMovie(name) {
  document.getElementById(name).style.display = 'none';
  console.log("hide "+name)
}

//if we can hide a movie we want to be abble to show one too.
function showMovie(name) {
  document.getElementById(name).style.display = 'block';
}

//now lets target the input box
const searchBox = document.getElementById('filterInput');
//we want to add an event listener so everytime the user inputs something
//we look through the movies and hide the ones that dont contain the string
//entered, we also want to make sure we show the right movies too
searchBox.addEventListener('input', () => {
  const value = searchBox.value;
  const visibleMovies = [];
  console.log(value)
  //lets filter the movies to only include the ones we want to hide
  const hiddenMovies = movies.filter(movie => {
      const hidden = movie.indexOf(value) < 0;
      //if we're not going to hide it lets show it.
      if(!hidden){
        visibleMovies.push(movie)
      }
      return hidden;
    });
  console.log(hiddenMovies)
  
  //loop through and hide the movies.
  for(let i = 0; i< hiddenMovies.length; i++){
    hideMovie(hiddenMovies[i]);
  }
  //loop through and show the movies
  for(let i = 0; i< visibleMovies.length; i++){
    showMovie(visibleMovies[i]);
  }
})

<header>
  <div class="container">
    <div id="branding">
      <h1><span id="logo">mov</span>BLANK</h1>
    </div>
    <nav>
      <ul>
        <input type="text" id="filterInput" placeholder="Search...">
        <li class="current"><a href="index.html">Home</a></li>
        <li><a id="newprojection" href="./html/newprojection.html">New projection</a></li>
        <li><a id="buyticket" href="./html/buyticket.html">Buy a Ticket</a></li>
        <li><a id="newuser" href="./html/newuser.html">New user</a></li>
        <li><a id="loginbtn" href="./html/login.html">Log in</a></li>
        <li>
          <a id="buy" href="#"></a>
        </li>
      </ul>
    </nav>
  </div>
</header>

<section id="boxes">
  <div id="div1" class=".container">
    <div id="annihilation" class="moviebox">
      <a class="moviea" href="./html/annihilation.html"><img src="./img/movie1.jpg"></a>
      <a id="delete" href="#">X</a>
      <h3 class="moviea">Annihilation</h3>
      <p class="moviea">Genre: Adventure, Fantasy</p>
    </div>
    <div id="bombcity" class="moviebox">
      <a class="imgmovie" href="./html/bombcity.html"><img src="./img/movie2.jpg"></a>
      <a id="change" href="#">X</a>
      <h3 class="namemovie">Bomb City</h3>
      <p class="genremovie">Genre: Action, Crime</p>
    </div>
    <div id="commuter" class="moviebox">
      <a class="imgmovie" href="./html/commuter.html"><img src="./img/movie3.jpg"></a>
      <a id="buy2" href="#">X</a>
      <h3 class="namemovie">The Commuter</h3>
      <p class="genremovie">Genre: Action, Drama</p>
    </div>
    <div id="bookmarksResults"></div>
  </div>
</section>

Answer 3

Probably the best way to do this is to use js libraries as angular or react.

but here is an simple example for vanila js using oninput event:

    <header>
      <div class="container">
        <div id="branding">
          <h1><span id="logo">mov</span>BLANK</h1>
        </div>
        <nav>
          <ul>
            <input type="text" id="filterInput" placeholder="Search..." oninput="filterMovies(this.value)">
            <li class="current"><a href="index.html">Home</a></li>
            <li><a id="newprojection" href="./html/newprojection.html">New projection</a></li>
            <li><a id="buyticket" href="./html/buyticket.html">Buy a Ticket</a></li>
            <li><a id="newuser" href="./html/newuser.html">New user</a></li>
            <li><a id="loginbtn" href="./html/login.html">Log in</a></li>
            <li>
              <a id="buy" href="#"></a>
            </li>
          </ul>
        </nav>
      </div>
    </header>
    
    <section id="boxes">
      <div id="movies_boxes_container" class=".container">
        <div id="annihilation" class="moviebox">
          <a class="moviea" href="./html/annihilation.html"><img src="./img/movie1.jpg"></a>
          <a id="delete" href="#">X</a>
          <h3 class="moviea">Annihilation</h3>
          <p class="moviea">Genre: Adventure, Fantasy</p>
        </div>
        <div id="bombcity" class="moviebox">
          <a class="imgmovie" href="./html/bombcity.html"><img src="./img/movie2.jpg"></a>
          <a id="change" href="#">X</a>
          <h3 class="namemovie">Bomb City</h3>
          <p class="genremovie">Genre: Action, Crime</p>
        </div>
        <div id="commuter" class="moviebox">
          <a class="imgmovie" href="./html/commuter.html"><img src="./img/movie3.jpg"></a>
          <a id="buy2" href="#">X</a>
          <h3 class="namemovie">The Commuter</h3>
          <p class="genremovie">Genre: Action, Drama</p>
        </div>
        <div id="bookmarksResults"></div>
      </div>
    </section>
    
    <script> 
      
      
    function filterMovies(val){
      val = val.toUpperCase();
      let moviesBoxes = document.getElementsByClassName('moviebox');
    
        Array.prototype.forEach.call(moviesBoxes, child => {
          let id = child.id.toUpperCase()
          if(!id.includes(val))
            child.style.display = "none";
          else{
            child.style.display = "block";
          }
    });
    }
    </script>

Answer 4

Some html:

<input id='search' type='text'>

<div id='hold_movies'>
  <a class='movie'>Annihilation</a><br>
  <a class='movie'>Bomb x City</a><br>
  <a class='movie'>The Commuter</a>
</div>

Some jQuery:

$("#search").keyup(function() {
    val = $.trim(this.value);
    if (val === "") {
    $('.movie').show();
    } else {
    $('.movie').hide();
    $(".movie:contains(" + val + ")").show();
    }
    });

Result:

To ensure the search is case-insensitive you can extend jQuery as follows:

$.expr[":"].contains = $.expr.createPseudo(function(arg) {
    return function( elem ) {
        return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});

Answer 5

• This alternative uses the functions querySelector and querySelectorAll to find the elements and make the necessary comparison.
• This approach uses the function indexOf to find the matches.
• This approach uses a class called hide to hide the elements who don't match the entered value.
• This approach is case-sensitive.
• Use the event input to capture any changes from your input text field.

document.getElementById('filterInput').addEventListener('input', function() {
  var value = this.value;
  var container = document.getElementById('boxes');
  Array.prototype.forEach.call(container.querySelectorAll('.moviebox'), function(e) {
    e.classList.add('hide');

    Array.prototype.forEach.call(e.querySelectorAll('.namemovie'), function(m) {
      if (value.trim() === '' || m.textContent.indexOf(value) !== -1) e.classList.remove('hide');
    });
  })
})

.hide {
  display: none
}

<header>
  <div class="container">
    <div id="branding">
      <h1><span id="logo">mov</span>BLANK</h1>
    </div>
    <nav>
      <ul>
        <input type="text" id="filterInput" placeholder="Search...">
        <li class="current"><a href="index.html">Home</a></li>
        <li><a id="newprojection" href="./html/newprojection.html">New projection</a></li>
        <li><a id="buyticket" href="./html/buyticket.html">Buy a Ticket</a></li>
        <li><a id="newuser" href="./html/newuser.html">New user</a></li>
        <li><a id="loginbtn" href="./html/login.html">Log in</a></li>
        <li>
          <a id="buy" href="#"></a>
        </li>
      </ul>
    </nav>
  </div>
</header>

<section id="boxes">
  <div id="div1" class=".container">
    <div id="annihilation" class="moviebox">
      <a class="moviea" href="./html/annihilation.html"><img src="./img/movie1.jpg"></a>
      <a id="delete" href="#">X</a>
      <h3 class="namemovie">Annihilation</h3>
      <p class="genremovie">Genre: Adventure, Fantasy</p>
    </div>
    <div id="bombcity" class="moviebox">
      <a class="imgmovie" href="./html/bombcity.html"><img src="./img/movie2.jpg"></a>
      <a id="change" href="#">X</a>
      <h3 class="namemovie">Bomb City</h3>
      <p class="genremovie">Genre: Action, Crime</p>
    </div>
    <div id="commuter" class="moviebox">
      <a class="imgmovie" href="./html/commuter.html"><img src="./img/movie3.jpg"></a>
      <a id="buy2" href="#">X</a>
      <h3 class="namemovie">The Commuter</h3>
      <p class="genremovie">Genre: Action, Drama</p>
    </div>
    <div id="bookmarksResults"></div>
  </div>
</section>

Answer 6

You have to implement a Filter/Search List.

There are countless ways to solve this problem but I will put here a complete example coming from w3schools.com

Here's the relevant example, all the code (css / javascript) is embedded in a single html page for the sake of simplicity.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#myUL li a {
  border: 1px solid #ddd;
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block
}

#myUL li a:hover:not(.header) {
  background-color: #eee;
}
</style>
</head>
<body>

<h2>My Phonebook</h2>

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">

<ul id="myUL">
  <li><a href="#">Adele</a></li>
  <li><a href="#">Agnes</a></li>

  <li><a href="#">Billy</a></li>
  <li><a href="#">Bob</a></li>

  <li><a href="#">Calvin</a></li>
  <li><a href="#">Christina</a></li>
  <li><a href="#">Cindy</a></li>
</ul>

<script>
function myFunction() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";

        }
    }
}
</script>

</body>
</html>

This implementation is using a for cycle to loop all the items in the list in search of the position of the characters we are searching: .indexOf(filter) and showing / hiding the current item accordingly.

A few basic concepts that combined together can achieve such a user friendly and powerful use.

As first thing I'd suggest you to separate those functional units in different files writing the parts completely and answering to any question or doubt or unclear information you read.

Write the code in the new files by hand, letter by letter. Read it, no copy and paste.

I've preferred to put a suggestion instead of a solution because your main request seems to be that you want to learn. Once you can disassemble / reassemble this code it will also be easy to implement it in your current page.

Take time, answer your own questions, start a course, get books, never give up.

Have fun!