Javascript 如何根据文本字段搜索显示列表项？_Javascript_Html_Jquery_Css_Wordpress

Javascript 如何根据文本字段搜索显示列表项？

javascript html jquery css wordpress

Javascript 如何根据文本字段搜索显示列表项？,javascript,html,jquery,css,wordpress,Javascript,Html,Jquery,Css,Wordpress,我有一个列表，其中的结果需要在默认情况下隐藏，并且在搜索字段为空/退格时再次隐藏。如果未找到结果，则显示消息或结果，指示“未找到匹配项”。我之前有一篇文章有类似的问题，但不得不放弃，因为它是使用引导程序制作的，这与我的Wordpress主题设置冲突 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-

我有一个列表，其中的结果需要在默认情况下隐藏，并且在搜索字段为空/退格时再次隐藏。如果未找到结果，则显示消息或结果，指示“未找到匹配项”。我之前有一篇文章有类似的问题，但不得不放弃，因为它是使用引导程序制作的，这与我的Wordpress主题设置冲突

<!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, txtValue;
    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];
        txtValue = a.textContent || a.innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}

$(document).ready(function() {
  $("#myUL li").hide();
  $('#contact').hide();
});

</script>

</body>
</html>


* {
框大小：边框框；
}
#我的输入{
背景图片：url（'/css/searchicon.png'）；
背景位置：10px 12px；
背景重复：无重复；
宽度：100%；
字体大小：16px；
填充：12px 20px 12px 40px；
边框：1px实心#ddd；
边缘底部：12px；
}
#密尔{
列表样式类型：无；
填充：0；
保证金：0；
}
#李美儿{
边框：1px实心#ddd；
页边距顶部：-1px；/*防止双边框*/
背景色：#f6f6f6；
填充：12px；
文字装饰：无；
字号：18px；
颜色：黑色；
显示：块
}
#myUL li a:悬停：非（.header）{
背景色：#eee；
}
我的电话簿









函数myFunction（）{
var输入、滤波器、ul、li、a、i、TXT值；
输入=document.getElementById（“myInput”）；
filter=input.value.toUpperCase（）；
ul=document.getElementById（“myUL”）；
li=ul.getElementsByTagName（“li”）；
对于（i=0；i-1）{
李[i].style.display=“”；
}否则{
li[i].style.display=“无”；
}
}
}
$（文档）.ready（函数（）{
$（“#myUL li”）.hide（）；
$（“#联系人”）.hide（）；
});

您可以创建一个函数来检查输入值是否存在，以隐藏/显示UL。在输入更改和页面加载时调用此函数

checkInputValueAndHideList（）
函数myFunction（）{
var输入、滤波器、ul、li、a、i、TXT值；
输入=document.getElementById（“myInput”）；
filter=input.value.toUpperCase（）；
ul=document.getElementById（“myUL”）；
li=ul.getElementsByTagName（“li”）；
对于（i=0；i-1）{
李[i].style.display=“”；
}否则{
li[i].style.display=“无”；
}
}
checkInputValueAndHideList（）
}
函数checkInputValueAndHideList（）{
const ul=document.getElementById（“myUL”）；
常量输入=document.getElementById（“myInput”）；
const noResult=document.getElementById（“无结果”）；
//console.log（'input.value'，input.value）
如果（！input.value）{
ul.style.display='无'
noResult.style.display='block'
}否则{
ul.style.display='block'
noResult.style.display='none'
}
}

*{
框大小：边框框；
}
#我的输入{
背景图片：url（'/css/searchicon.png'）；
背景位置：10px 12px；
背景重复：无重复；
宽度：100%；
字体大小：16px；
填充：12px 20px 12px 40px；
边框：1px实心#ddd；
边缘底部：12px；
}
#密尔{
列表样式类型：无；
填充：0；
保证金：0；
}
#李美儿{
边框：1px实心#ddd；
页边距顶部：-1px；/*防止双边框*/
背景色：#f6f6f6；
填充：12px；
文字装饰：无；
字号：18px；
颜色：黑色；
显示：块
}
#myUL li a:悬停：非（.header）{
背景色：#eee；
}


我的电话簿









没有找到匹配项

此解决方案使用稍微经过重构的代码版本，包括：

“keyup”事件侦听器（而不是内联事件处理程序）
一个名为
```
.hidden
```
一个名为
```
no results
```
用于处理列表项的两个助手函数

事件侦听器和CSS选择器在页面上帮助分离关注点。（样式由CSS而不是JavaScript手动完成，事件由JavaScript单独处理，而不是包含在页面的标记中。）

no results

元素和helper函数只是个人偏好，但我认为它们使事情更整洁

有关详细说明，请参阅代码内注释

$（文档）.ready（函数（）{ 常数 //标识DOM元素输入=document.getElementById（“myInput”）， noResults=document.getElementById（“无结果”）， listItems=Array.from（document.querySelectorAll（“#myUL li”）， //定义一个函数来获取大写的li文本 getLiUpperText=（li）=>{ 常数 a=li.getElementsByTagName（“a”）[0]， text=a.textContent | | a.innerText liUpperText=text.toUpperCase（）；返回文本； }, //定义一个隐藏所有列表项的函数 hideListItems=（）=> listItems.forEach（（li）=>li.classList.add（“隐藏”）； //最初隐藏所有内容（使用CSS而不是手动设置样式） noResults.classList.add（“隐藏”）；汗症（）； //在keyup上调用inputListener input.addEventListener（“键控”，inputListener）； //定义inputListener 函数inputListener（事件）{ hideListItems（）；//暂时隐藏所有名称 const inputUpperText=event.target.value.toUpperCase（）；如果（inputUpperText==“”）{ return；//如果输入为空，则提前退出 } noResults.classList.remove（“hidden”）；//暂时显示“无结果” 对于（让李列出列表项）{ if（getLiUpperText（li）.includes（inputUpperText））{ li.classList.remove（“hidden”）；//显示项 noResults.classList.add（“隐藏”）；//隐藏“无结果” }