1

He estado buscando por la web el cómo colocar un dropdown en la barra de navegación. El resultado fue fácil, pero ahora quería implementar otro código de un dropdown solo que filtraba el contenido.

Intenté ponerlo todo junto en el mismo sitio y salió a medias. No consigo que quede del todo bien.

Este es el código que tengo:

body {
  font-family: Arial, Helvetica, sans-serif;
}

.navbar {
  overflow: hidden;
  background-color: #333;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
   overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

#myInput {
  box-sizing: border-box;
  background-image: url('searchicon.png');
  background-position: 14px 12px;
  background-repeat: no-repeat;
  font-size: 16px;
  padding: 14px 20px 12px 45px;
  border: none;
  border-bottom: 1px solid #ddd;
}

#myInput:focus {outline: 3px solid #ddd;}

.show {display: block;}

a {
    display: flex;
    align-items: center;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class="navbar">

  <a href="#inicio">
  <i class="material-icons" style="font-size:24px; color: white">home</i>Inicio</a>
  
  <a href="#noticias">
  <i class="material-icons" style="font-size:24px; color: white">map</i>Noticias</a>
  
  <div class="dropdown" style="float:right">
    <button onclick="myFunction()" class="dropbtn">Buscar 
      <i class="material-icons" style="font-size:24px; color: white">search</i>
    </button>
    <div class="dropdown-content">
      <input type="text" placeholder="Buscar..." id="myInput" onkeyup="filterFunction()">
      <a href="#">Casa</a>
      <a href="#">Hotel</a>
      <a href="#">Piso</a>
    </div>
    
  </div> 
</div>

</body>
<script>

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

function filterFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  div = document.getElementById("myDropdown");
  a = div.getElementsByTagName("a");
  for (i = 0; i < a.length; i++) {
    txtValue = a[i].textContent || a[i].innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      a[i].style.display = "";
    } else {
      a[i].style.display = "none";
    }
  }
}
</script>
</html>

Esto ha sido un intento de fusión del filtro del dropdown con el dropdown en el menú al no encontrar nada parecido...

Como se puede apreciar, está más abajo que el resto y si busca algo no lo filtra.

Me gustaría que quedase alineado con el resto y que, bueno, que funcione como lo que pretende ser. Muchas gracias.

2
  • Yo añadiría la etiqueta javascript a la pregunta ya que todo el tema del filtrado está hecho con ello.
    – phpMyGuel
    Commented el 4 feb. 2020 a las 15:58
  • ¡Cierto! Se me pasó, costumbre de no preguntar por ello
    – Lucía
    Commented el 4 feb. 2020 a las 15:59

1 respuesta 1

2

Te faltaban dos cosas:

  1. El id myDropdown no existia.
  2. vertical-align:middle

body {
  font-family: Arial, Helvetica, sans-serif;
}

.navbar {
  overflow: hidden;
  background-color: #333;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
   overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

#myInput {
  box-sizing: border-box;
  background-image: url('searchicon.png');
  background-position: 14px 12px;
  background-repeat: no-repeat;
  font-size: 16px;
  padding: 14px 20px 12px 45px;
  border: none;
  border-bottom: 1px solid #ddd;
}

#myInput:focus {outline: 3px solid #ddd;}

.show {display: block;}

a {
    display: flex;
    align-items: center;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class="navbar">

  <a href="#inicio">
  <i class="material-icons" style="font-size:24px; color: white">home</i>Inicio</a>
  
  <a href="#noticias">
  <i class="material-icons" style="font-size:24px; color: white">map</i>Noticias</a>
  
  <div class="dropdown">
    <button onclick="myFunction()" class="dropbtn">Buscar 
      <i class="material-icons" style="font-size:24px; color: white; vertical-align:middle">search</i>
    </button>
    <div id="myDropdown" class="dropdown-content">
      <input type="text" placeholder="Buscar..." id="myInput" onkeyup="filterFunction()">
      <a href="#">Casa</a>
      <a href="#">Hotel</a>
      <a href="#">Piso</a>
    </div>
    
  </div> 
</div>

</body>
<script>

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

function filterFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  div = document.getElementById("myDropdown");
  a = div.getElementsByTagName("a");
  for (i = 0; i < a.length; i++) {
    txtValue = a[i].textContent || a[i].innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      a[i].style.display = "";
    } else {
      a[i].style.display = "none";
    }
  }
}
</script>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.