Word Finder with JavaScript

Question

Word Finder with JavaScript

Navigation

#1 by (5 votes)

5

My problem is this, on the internet I found a scrip to implement a word filter within my project, it works perfectly.

Example: Filter "Tienda Abarrotes Pablo" and it shows me the name of the store and its characteristics but if I search for "Tienda Pablo" the line is broken and the filter does not work and I do not know how to extract the words and then can join so you can show me the data of it? If someone has gone through the same problem they could help me.

I leave the Script and the project

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>

javascript

asked by Bahamut4321 14.12.2018 в 22:36

source

1 answer

Difference between fetch and fetchall in PHP? Validate input type numeric?

score 5 · Accepted Answer

You can solve it in the following way:

divides the filter string into words

filtro.split(' ')

We verify that from that list of filter words the text of the section contains all of the following:

2.1 we look for each word but of the filter and if it is found we register the success case numerically

2.2 we finally hide those that do not have all the words in our search filter

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>

Note: This solution has the advantage of correctly diagnosing queries such as:

shop
Juan store
shop find
difficult