javascript - 你如何在javascript中创建过滤器搜索?
问题描述
我喜欢 w3shools 中的可编辑过滤器搜索列表。 https://www.w3schools.com/howto/howto_js_filter_lists.asp。
它使用下面的 javascript 代码进行过滤。
function myFunction() {
// Declare variables
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
// Loop through all list items, and hide those who don't match the search query
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
我需要 SO 社区在某处进行修改,以便当搜索框没有写入任何内容时,返回的过滤项是无的。在上面的代码中,当什么都不写时,结果是显示列表中的所有项目。
我对 javascript 不太擅长,所以这里有人可以为我重新编码。我认为更改应该发生在第 11 行for (i = 0; i < li.length; i++)。
解决方案
- 首先在CSS中全部隐藏
#myUL li {display: none; }
- 在输入时首先显示所有内容,以便搜索可以搜索文本(创建
showALL()
的函数在输入时调用它),这需要完成,因为搜索不适用于显示无元素。 - 仅当输入不为空时才做出反应 - 添加到过滤器
if (txtValue.toUpperCase().indexOf(filter) > -1 && input.value != "") {
function myFunction() {
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById('myInput');
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName('li');
showALL() // on input show all
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1 && input.value != "") {
// react only if input is not empty with && input.value != ""
li[i].style.display = "block";
} else {
li[i].style.display = "none";
}
}
}
// showALL() function you called on input
const showALL = () => {
[...document.querySelectorAll('#myUL li')].forEach(
li => {
li.style.display = "block";
}
)
}
#myInput {
background-image: url('/css/searchicon.png');
/* Add a search icon to input */
background-position: 10px 12px;
/* Position the search icon */
background-repeat: no-repeat;
/* Do not repeat the icon image */
width: 100%;
/* Full-width */
font-size: 16px;
/* Increase font-size */
padding: 12px 20px 12px 40px;
/* Add some padding */
border: 1px solid #ddd;
/* Add a grey border */
margin-bottom: 12px;
/* Add some space below the input */
}
#myUL {
/* Remove default list styling */
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li a {
border: 1px solid #ddd;
/* Add a border to all links */
margin-top: -1px;
/* Prevent double borders */
background-color: #f6f6f6;
/* Grey background color */
padding: 12px;
/* Add some padding */
text-decoration: none;
/* Remove default text underline */
font-size: 18px;
/* Increase the font-size */
color: black;
/* Add a black text color */
display: block;
/* Make it into a block element to fill the whole list */
}
#myUL li a:hover:not(.header) {
background-color: #eee;
/* Add a hover effect to all links, except for headers */
}
/* First hide all */
#myUL li {
display: none;
}
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
<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>
推荐阅读
- mongodb - 无法使用 golang 更新 Mongo 中子元素的属性
- swift - 快照值作为 int 导致崩溃
- c# - 找不到我的 xml 文件的路径
- julia - Julia:如何查看去向量化的代码?
- javascript - 如何围绕现有的 Javascript 库创建 Angular 包装器?
- javascript - 使用一段深度对象键作为局部变量
- docker - 以编程方式检查 Docker 容器进程是否以非零状态结束
- java - 修改流阅读器类以从文件而不是 System.in 中读取
- ios - Swift为视图背景绘制弧线
- mysql - 基于一列数据合并MySQL中的2个表