Fatal编程技术网
  • javascript/
  • Javascript 如何按名称筛选元素

Javascript 如何按名称筛选元素

javascript html

Javascript 如何按名称筛选元素,javascript,html,filtering,Javascript,Html,Filtering,我有3部电影，湮没，炸弹x城市和通勤者，我不知道热把javascript代码，所以当我开始搜索像安，只有湮没电影框出现，其他不显示…如过滤…请帮助我不太擅长这方面的东西，我想学习。提前感谢 莫夫布兰克 歼灭 类型：冒险、幻想 炸弹城 体裁：动作、犯罪 通勤者 类型：动作、戏剧 我会将属性onkeyup添加到输入元素中，并将其设置为一个查看输入文本的函数，然后在moviebox div元素中循环并隐藏它们（如果h3元素文本不包含输入值） 例如： <input type="text" id=

我有3部电影，湮没，炸弹x城市和通勤者，我不知道热把javascript代码，所以当我开始搜索像安，只有湮没电影框出现，其他不显示…如过滤…请帮助我不太擅长这方面的东西，我想学习。提前感谢

莫夫布兰克 歼灭

类型：冒险、幻想

炸弹城

体裁：动作、犯罪

通勤者

类型：动作、戏剧

我会将属性onkeyup添加到输入元素中，并将其设置为一个查看输入文本的函数，然后在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';
    }
}
您必须实现一个筛选/搜索列表

有无数种方法可以解决这个问题，但我将在这里提出一个解决方案

下面是一个相关的示例，为了简单起见，所有的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循环来循环列表中的所有项目，以搜索我们正在搜索的字符的位置：.indexOffilter并相应地显示/隐藏当前项目

几个基本概念结合在一起可以实现这样一个用户友好和强大的使用

作为第一件事，我建议您将这些功能单元分离在不同的文件中，完整地编写这些部分，并回答您阅读的任何问题、疑问或不清楚的信息

用手一个字母一个字母地在新文件中写代码。 阅读它，没有复制和粘贴

我宁愿提出建议而不是解决方案，因为你的主要要求似乎是你想学习。 一旦你可以反汇编/重新组装这段代码，它也将很容易在你的当前页面中实现

花时间，回答你自己的问题，开始一门课程，买书，永不放弃

玩得开心

此备选方案使用函数和 找出要素并进行必要的比较。 这种方法使用函数查找匹配项。 这种方法使用一个名为hide的类来隐藏与输入值不匹配的元素。 这种方法区分大小写。 使用事件捕获输入文本字段中的任何更改。 document.getElementById'filterInput'.addEventListener'input'，函数{ var值=此值； var container=document.getElementById'box'； Array.prototype.forEach.callcontainer.queryselectoral.moviebox'，function{ e、 类列表。添加“隐藏”； Array.prototype.forEach.calle.querySelectorAll'.namemovie'，functionm{ 如果value.trim===|| m.textContent.indexOfvalue！==-1 e.classList.删除“隐藏”； }; } } .隐藏{ 显示：无 } 莫夫布兰克 歼灭

类型：冒险、幻想

炸弹城

体裁：动作、犯罪

通勤者

类型：动作、戏剧

一些html：

结果:

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

$.expr[":"].contains = $.expr.createPseudo(function(arg) {
    return function( elem ) {
        return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});
最好的方法可能是将js库用作angular或react

但下面是vanila js使用oninput事件的一个简单示例：

莫夫布兰克 歼灭

类型：冒险、幻想

炸弹城

体裁：动作、犯罪

通勤者

类型：动作、戏剧

函数filterMoviesval{ val=val.toUpperCase； 让moviesboxs=document.getElementsByClassName'moviebox'； Array.prototype.forEach.CallMoviesBox，子项=>{ 设id=child.id.toUpperCase if！id.includeVal child.style.display=无； 否则{ child.style.display=块； } }; }
这是我想到的。这是一个学习JS的好小项目！您应该尝试下一步，在给定一系列电影的情况下，自动创建html。这对你所做的可能有点沉重 ，但React是一个整洁的JS库，值得研究和学习。另外，使用。在他们里面。你通常不想那样做。看看你的容器类

//抓住所有的电影 让movies=document.getElementsByClassName'moviebox'； //这将返回一个我们需要数组的对象 //里面有所有的名字。因此，让我们调用OBject.keys，它将 //返回包含此对象所有键的数组 movies=Object.keysmovies .mapkey=>movies[key].id； //我们所做的是循环遍历键0,1,2，并用它们索引到对象中[key]。然后，由于hte id似乎是电影的名称，我们只需获取id movies[key].id，然后将此更新数组保存到已定义的movies数组中。 console.logmovies； //^看看吧，这里有电影列表，动态抓取！ //让我们定义一个函数来隐藏给定名称的电影。 //这是一个超基本的函数，但有一点做得很好。 函数hideMoviename{ document.getElementByIdname.style.display='none'； console.loghide+名称 } //如果我们能隐藏一部电影，我们也希望能被缩写为放映一部。 函数showMoviename{ document.getElementByIdname.style.display='block'； } //现在让我们以输入框为目标 const searchBox=document.getElementById'filterInput'； //我们希望添加一个事件监听器，以便用户每次输入一些内容 //我们浏览电影并隐藏那些不包含字符串的 //进入后，我们还希望确保放映正确的电影 searchBox.addEventListener'input'，=>{ const value=searchBox.value； const visibleMovies=[]； console.logvalue //让我们对电影进行过滤，使其仅包含我们要隐藏的电影 常量hiddenMovies=movies.filtermovie=>{ const hidden=movie.indexOfvalue<0； //如果我们不想把它藏起来，就让我们把它展示出来。 如果！隐藏{ 可视视频 } 返回隐藏； }; console.loghiddenMovies //循环并隐藏电影。 forlet i=0；i类型：冒险、幻想

炸弹城

体裁：动作、犯罪

通勤者

类型：动作、戏剧

最近的javascript函数在这里吗？@AnthonyMcGrath是的，它是！欢迎来到stackoverflow！在这里提问之前，您应该对如何使用JavaScript实现这一点进行更多的研究。有许多关于使用JavaScript构建可搜索列表的教程，可以通过快速的谷歌搜索轻松找到。 
$("#search").keyup(function() {
    val = $.trim(this.value);
    if (val === "") {
    $('.movie').show();
    } else {
    $('.movie').hide();
    $(".movie:contains(" + val + ")").show();
    }
    });

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