小贝子编程

筛选器搜索列表未检索不可见的段落



我需要将这些列表标题上的文本水平和垂直居中，这些列表名为：通讯、工作培训和文档。我试过以下几种：

a) 使用div，b) 使用文本对齐功能c) 使用边距：自动功能

也许我用错了。我正在学习编码：P请帮助

var filter = document.getElementById('myInput');
var drinks = document.querySelectorAll('.des');
filter.addEventListener('keyup',function(e){
var s = e.target.value.toLowerCase();
drinks.forEach(function(el,i){
if(s.length > 3){
if(el.textContent.toLowerCase().indexOf(s) < 0){
el.style.display = 'none';
}else{
el.style.display = 'block';
}
}else{
drinks.forEach(function(el,i){
el.style.display = 'block';
});
}

});
});
		#myInput{
		  padding: 10px;
		  border-radius: 5px;
		  font-size: 14px;
		  border: 1px solid #CCC;
		  margin-left:20px;
		}
		.list{
		  float: left;
		  padding: 0px;
		  margin-right: 20px;
		  list-style: none;
		  margin-top: -1px; /* Prevent double borders */
		  margin-left:20px;
		  font-size: 18px;
		  color: black;
		  background-color:#f6f6f6;
		}
		
		 .list li:nth-child(1){
		  font-weight: bold;
		  margin-bottom: 5px;
		}
		
		#list1{
		 width:25%;
		}
		
		#h1{
		 background: #e65c00;  /* fallback for old browsers */
		 background: -webkit-linear-gradient(to right, #F9D423, #e65c00);  /* Chrome 10-25, Safari 5.1-6 */
		 background: linear-gradient(to right, #F9D423, #e65c00); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
		 height:50px;
		 font-size:20px;
		 font-family:Segoe UI;
		 text-align:center;
		 border-radius:7px;
		 }
		
		#list1 a{
		 border: 1px solid #ddd;
		 border-radius:7px;
		 margin-top: -1px; /* Prevent double borders */
		 padding: 8px;
		 text-decoration: none;
	     font-size: 18px;
		 color: black;
		 background-color:#f6f6f6;
		 display: block;
		}
		
		#list1 li a:hover {
		 background-color: #FCF3CF;
		 }
		
		#list2{
		  width:25%;
		}
		
		#h2{
		 background: #00b09b;  /* fallback for old browsers */
		 background: -webkit-linear-gradient(to right, #96c93d, #00b09b);  /* Chrome 10-25, Safari 5.1-6 */
		 background: linear-gradient(to right, #96c93d, #00b09b); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
		 height:50px;
		 font-size:20px;
		 font-family:Segoe UI;
		 text-align:center;
		 border-radius:7px;
		 }
		
		#list2 a{
		 border: 1px solid #ddd;
		 border-radius:7px;
		 margin-top: -1px; /* Prevent double borders */
		 padding: 8px;
		 text-decoration: none;
	     font-size: 18px;
		 color: black;
		 background-color:#f6f6f6;
		 display: block;
		}
		
		#list2 li a:hover {
		 background-color: #b8ede2;
		 }
		
		#list3{
		  width:25%;
		}
		
		#h3{
		 background: #36D1DC;  /* fallback for old browsers */
		 background: -webkit-linear-gradient(to left, #5B86E5, #36D1DC);  /* Chrome 10-25, Safari 5.1-6 */
		 background: linear-gradient(to left, #5B86E5, #36D1DC); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
		 height:50px;
		 font-size:20px;
		 font-family:Segoe UI;
		 text-align:center;
		 border-radius:7px;
		 }
		
		#list3 a{
		 border: 1px solid #ddd;
		 border-radius:7px;
		 margin-top: -1px; /* Prevent double borders */
		 padding: 8px;
		 text-decoration: none;
	     font-size: 18px;
		 color: black;
		 background-color:#f6f6f6;
		 display: block;
		}
		
		#list3 li a:hover {
		 background-color: #D6EAF8;
		 }
		
		p.invisible {visibility:hidden;
			 display:inline;
			 font-size:0.1px;
			 text-align:center;
			 }
		
<html>
<head>
<link href="CSS/style.css" rel="stylesheet" type="text/css" />
</head>
		
<body>
</br>
<input type="text" id="myInput" placeholder="Ingresa palabra a buscar">
</br>
</br>

<ul id="list1" class="list">
<li id="h1">COMUNICADOS</li>

<li class="des"><a target="_blank" href="#">Comunicado 1 - Payroll 
	  <p class="invisible">
	  Payroll 
	  </p></a></li>

<li class="des">Paper2</li>
<li class="des">Paper3</li>
</ul>
<ul id="list2" class="list">
<li id="h2">TRAINING ON THE JOB</li>
<li class="des"><a href="#">Training on the Job
	  <p class="invisible">
	  Training on the Job
	  </p></a></li>


<li class="des">TOJ2</li>
<li class="des">TOJ3</li>
</ul>
<ul id="list3" class="list">
<li id="h3">DOCUMENTOS</li>

<li class="des"><a target="_blank" href="#">Procedimiento Atención Usuario VIP
	  <p class="invisible">
	  VIP
	  </p></a></li>  
<li class="des">Document2</li>
<li class="des">Document3</li>

</ul>
</body>
<html>

您要查找的是：

li.des {
text-align: center;
}


var filter = document.getElementById('myInput');
var drinks = document.querySelectorAll('.des');
filter.addEventListener('keyup', function(e) {
var s = e.target.value.toLowerCase();
drinks.forEach(function(el, i) {
if (s.length > 3) {
if (el.textContent.toLowerCase().indexOf(s) < 0) {
el.style.display = 'none';
} else {
el.style.display = 'block';
}
} else {
drinks.forEach(function(el, i) {
el.style.display = 'block';
});
}
});
});
#myInput {
padding: 10px;
border-radius: 5px;
font-size: 14px;
border: 1px solid #CCC;
margin-left: 20px;
}
.list {
float: left;
padding: 0px;
margin-right: 20px;
list-style: none;
margin-top: -1px;
/* Prevent double borders */
margin-left: 20px;
font-size: 18px;
color: black;
background-color: #f6f6f6;
}
.list li:nth-child(1) {
font-weight: bold;
margin-bottom: 5px;
}
#list1 {
width: 25%;
}
#h1 {
background: #e65c00;
/* fallback for old browsers */
background: -webkit-linear-gradient(to right, #F9D423, #e65c00);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #F9D423, #e65c00);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
height: 50px;
font-size: 20px;
font-family: Segoe UI;
text-align: center;
border-radius: 7px;
}
#list1 a {
border: 1px solid #ddd;
border-radius: 7px;
margin-top: -1px;
/* Prevent double borders */
padding: 8px;
text-decoration: none;
font-size: 18px;
color: black;
background-color: #f6f6f6;
display: block;
}
#list1 li a:hover {
background-color: #FCF3CF;
}
#list2 {
width: 25%;
}
#h2 {
background: #00b09b;
/* fallback for old browsers */
background: -webkit-linear-gradient(to right, #96c93d, #00b09b);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #96c93d, #00b09b);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
height: 50px;
font-size: 20px;
font-family: Segoe UI;
text-align: center;
border-radius: 7px;
}
#list2 a {
border: 1px solid #ddd;
border-radius: 7px;
margin-top: -1px;
/* Prevent double borders */
padding: 8px;
text-decoration: none;
font-size: 18px;
color: black;
background-color: #f6f6f6;
display: block;
}
#list2 li a:hover {
background-color: #b8ede2;
}
#list3 {
width: 25%;
}
#h3 {
background: #36D1DC;
/* fallback for old browsers */
background: -webkit-linear-gradient(to left, #5B86E5, #36D1DC);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #5B86E5, #36D1DC);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
height: 50px;
font-size: 20px;
font-family: Segoe UI;
text-align: center;
border-radius: 7px;
}
#list3 a {
border: 1px solid #ddd;
border-radius: 7px;
margin-top: -1px;
/* Prevent double borders */
padding: 8px;
text-decoration: none;
font-size: 18px;
color: black;
background-color: #f6f6f6;
display: block;
}
#list3 li a:hover {
background-color: #D6EAF8;
}
p.invisible {
visibility: hidden;
display: inline;
font-size: 0.1px;
text-align: center;
}
li.des {
text-align: center;
}
<html>
<head>
<link href="CSS/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
</br>
<input type="text" id="myInput" placeholder="Ingresa palabra a buscar">
</br>
</br>
<ul id="list1" class="list">
<li id="h1">COMUNICADOS</li>
<li class="des"><a target="_blank" href="#">Comunicado 1 - Payroll 
	  <p class="invisible">
	  Payroll 
	  </p></a></li>
<li class="des">Paper2</li>
<li class="des">Paper3</li>
</ul>
<ul id="list2" class="list">
<li id="h2">TRAINING ON THE JOB</li>
<li class="des"><a href="#">Training on the Job
	  <p class="invisible">
	  Training on the Job
	  </p></a></li>
<li class="des">TOJ2</li>
<li class="des">TOJ3</li>
</ul>
<ul id="list3" class="list">
<li id="h3">DOCUMENTOS</li>
<li class="des"><a target="_blank" href="#">Procedimiento Atención Usuario VIP
	  <p class="invisible">
	  VIP
	  </p></a></li>
<li class="des">Document2</li>
<li class="des">Document3</li>
</ul>
</body>
<html>

希望这能有所帮助！：)

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium