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>