如何按名称过滤元素

Question

我有3部电影，（Annihilation，Bomb x City和The Commuter），我不知道如何热销javascript代码，所以当我开始搜索＆＃34; ann＆＃34;只有湮灭电影框出现而其他没有显示...就像过滤...请帮助我不是很擅长这个东西，我想学习。谢谢你。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

• 此替代方法使用 querySelector 和 querySelectorAll 功能 找到元素并进行必要的比较。
• 此方法使用 indexOf 功能查找匹配项。
• 此方法使用名为hide的类来隐藏与输入值不匹配的元素。
• 此方法区分大小写。
• 使用 input 事件捕获输入文本字段中的所有更改。

＆＃13;

＆＃13;

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');
    });
  })
})

＆＃13;

.hide {
  display: none
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

我会将属性onkeyup添加到您的input元素并将其设置为等于查看输入文本的函数，然后遍历您的moviebox div元素并在h3元素文本不包含输入值时隐藏它们。

示例：

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

您必须实施过滤/搜索列表。

有很多方法可以解决这个问题，但我会在这里提出一个complete example coming from w3schools.com

以下是相关示例，为简单起见，所有代码（css / javascript）都嵌入在单个html页面中。

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

此实现使用for循环遍历列表中的所有项目以搜索我们正在搜索的字符的位置：.indexOf（filter）并相应地显示/隐藏当前项目。

结合在一起的一些基本概念可以实现这种用户友好和强大的用途。

首先，我建议您将不同文件中的功能单元分开，完整地编写部分，并回答任何问题或怀疑或不清楚的信息。

手动，逐字地将代码写入新文件中。 阅读它，没有复制和粘贴。

我更倾向于提出建议而不是解决方案，因为您的主要请求似乎是您想要学习的。 一旦您可以反汇编/重新组合此代码，您也可以在当前页面中轻松实现它。

花点时间，回答你自己的问题，开始上课，拿书，永不放弃。

玩得开心！

Answer 4

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

一些 jQuery ：

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

<强>结果：

为确保搜索不区分大小写，您可以按如下方式扩展jQuery：

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

Answer 5

执行此操作的最佳方法可能是将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>

Answer 6

这是我想出的。这是学习一些JS的好项目！你应该尝试做一些事情，你可以自动创建给定电影数组的html。对于你正在做的事情，它可能有点沉重，但React是一个整洁的JS库，值得研究和学习。还要注意其中包含.的类名。你通常不想那样做。 （看着你的容器类）

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