Фильтровать список поиска, не получая невидимый абзац

Question

Фильтровать список поиска, не получая невидимый абзац

1

Мне нужно сосредоточить горизонтально и вертикально текст в заголовках этих списков, названных: comunicados, обучение на рабочем месте и документы. Я пробовал следующее:

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>

T100 07 сен. 2017, в 02:42

Источник

Теги:

javascript

html5

css3

1 ответ

Ещё вопросы

Obsidian Age · Answer 1 · 2017-09-06T23-17-00.000Z

Что вы ищете:

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>

Надеюсь это поможет! :)

Это выравнивает элементы <li>. То, что я ищу, это выравнивание заголовков. Как по горизонтали, так и по вертикали