4

Mi problema es el siguiente, en internet encontré un scrip para poder implementar un filtro de palabras dentro de mi proyecto, funciona a la perfección.

Ejemplo: Filtro "Tienda Abarrotes Pablo" y me muestra el nombre de la tienda y sus características pero si yo busco "Tienda Pablo" se rompe la línea y el filtro no funciona y no se como extraer las palabras y que después las pueda unir para que me pueda mostrar los datos de la misma ¿? si alguien ha pasado por el mismo problema me podrían ayudar

dejo el Script y el proyecto

function myFunction() {
  var input, filter, section, div, h1, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  section = document.getElementById("mySection");
  div = section.getElementsByTagName("div");
  for (i = 0; i < div.length; i++) {
    h1 = div[i].getElementsByTagName("h1")[0];
    if (h1) {
      if (h1.innerHTML.toUpperCase().indexOf(filter) > -1) {
        div[i].style.display = "";
      } else {
        div[i].style.display = "none";
      }
    }
  }
}
<section>
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" id="search-buscador">
        <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Buscar por tienda ...">
      </div>
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <section id="mySection">
          <div class="card">
            <h1 id="titulo-buscador">Tienda Abarrotes Pablo</h1>
            <hr>
            <div class="row">
              <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" id="nombre">
                <h5 class="card-title" id="h5-buscador">Nombre: Pablo Medina</h5>
              </div>
            </div>
          </div>
          <div class="card">
            <h1 id="titulo-buscador">Tienda Abarrotes Juan</h1>
            <hr>
            <div class="row">
              <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" id="nombre">
                <h5 class="card-title" id="h5-buscador">Nombre: Juan Rosas</h5>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  </div>
</section>

4
  • Que es "mySection"? No lo veo en el html? Commented el 14 dic. 2018 a las 22:17
  • hola @Miguel Angel Gonzalez Pinto cierto es el id de mi etiqueta <section> ya lo corregí Commented el 14 dic. 2018 a las 22:22
  • Por favor danos ejemplos de búsquedas y resultados esperados, hay muchas formas de hacer lo que buscas, incluso hay algoritmos para buscar el resultado correcto aún cuando escribas "Tienda Abarrotes Pabla" en vez de "Tienda Abarrotes Pablo" Commented el 14 dic. 2018 a las 22:27
  • @Ruslan López, por ejemplo: Introduzco la palabra "Tienda" y me muestra mis dos tiendas en listadas si pongo la palabra "Abarrotes Pablo" me muestra solo la tienda de "Tienda Abarrotes Pablo" y desaparece la otra tienda y eso esta perfecto, pero el problema es que si yo busco "Tienda Pablo" sin la palabra "Abarrotes" desaparecen todas las tiendas por que como me salto la palabra "Abarrotes" ya no funciona mi buscador y ese es mi problema no se como hacer que aun que se salten esa palabra me muestre solo la "Tienda Abarrotes Pablo" Commented el 14 dic. 2018 a las 22:40

1 respuesta 1

6

Puedes resolverlo de la siguiente manera:

  1. divide la cadena del filtro en palabras

    filtro.split(' ')
    
  2. verificamos que de esa lista de palabras del filtro el texto de la sección contenga todas de la siguiente manera:

    2.1 buscamos cada palabra pero del filtro y si se encuentra registramos el caso de éxito numéricamente

    2.2 finalmente ocultamos aquellas que no tengan todas las palabras de nuestro filtro de búsqueda

function myFunction() {
  var input, filter, section, div, h1, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  section = document.getElementById("mySection");
  div = section.getElementsByTagName("div");



  for (i = 0; i < div.length; i++) {
    h1 = div[i].getElementsByTagName("h1")[0];
    if (h1) {
      var palabrasEnFiltro = filter.split(' ');
      var hallado = 0;
      for (var filtro of palabrasEnFiltro) {
        if (h1.innerHTML.toUpperCase().indexOf(filtro) > -1) {
          hallado++;
        }
      }

      if (hallado === palabrasEnFiltro.length) {
        div[i].style.display = "";
      } else {
        div[i].style.display = "none";
      }

    }
  }

}
<section>
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" id="search-buscador">
        <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Buscar por tienda ...">
      </div>
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <section id="mySection">
          <div class="card">
            <h1 id="titulo-buscador">Tienda Abarrotes Pablo</h1>
            <hr>
            <div class="row">
              <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" id="nombre">
                <h5 class="card-title" id="h5-buscador">Nombre: Pablo Medina</h5>
              </div>
            </div>
          </div>
          <div class="card">
            <h1 id="titulo-buscador">Tienda Abarrotes Juan</h1>
            <hr>
            <div class="row">
              <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" id="nombre">
                <h5 class="card-title" id="h5-buscador">Nombre: Juan Rosas</h5>
              </div>
            </div>
          </div>
          <div class="card">
            <h1 id="titulo-buscador">Tienda Abarrotes súper difícil de hallar</h1>
            <hr>
            <div class="row">
              <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" id="nombre">
                <h5 class="card-title" id="h5-buscador">Nombre: Zacarias Blanco Dehallí</h5>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  </div>
</section>

Nota: Esta solución tiene la ventaja de detcetar correctamente consultas como:

  • tienda
  • tienda juan
  • tienda hallar
  • de difícil
2
  • es justo lo que necesitaba, había buscado y encontré sobre la función split() pero no me había quedado claro como se utilizaba para unir las palabras, pero con tu explicación detallada y el ejemplo que me mostraste me quedo demasiado claro y te agradezco por tu apoyo ¡ Muchas Gracias ! Commented el 14 dic. 2018 a las 23:36
  • split divide, join une, en nuestro caso solamente queríamos contar las que concordaran por eso no unimos, si te salen más requerimientos adicionales como manejo de acentos y caracteres especiales no dudes en preguntar de nuevo Commented el 14 dic. 2018 a las 23:41

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.