javascript - 如何按名称过滤元素

Question

我有 3 部电影(《湮灭》、《炸弹 x 城市》和《通勤者》)，我不知道是否需要放置 javascript 代码，所以当我开始搜索“ann”时，只会出现湮灭电影框，而不会显示其他电影框...就像过滤...请帮助我不太擅长这些东西，我想学习。提前致谢。

<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

可能最好的方法是使用 Angular 或 React 等 js 库。

但这里是一个使用 oninput 事件的 vanila js 的简单示例:

    <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>