0
97
VistasBúsqueda avanzada en Javascript
Intento implementar una barra de búsqueda en un proyecto. Simplemente debería buscar las entradas y ocultar las filas, cuando la entrada no coincida. Esto es lo que hice y está funcionando.
_searchCalls() { let rows = document.querySelector('call-journal').shadowRoot.querySelectorAll('#row') let callEntries = document.querySelector('call-journal').shadowRoot.querySelectorAll('call-entry') for(let i = 0; callEntries.length > i; i++) { let tmp = callEntries[i].shadowRoot.querySelector('.callInfo') let entries = tmp.textContent.toLowerCase() let dates = callEntries[i].shadowRoot.querySelector('.dateWrapper').textContent let userInput = this._getSearchInput().toLowerCase() if(!(entries.includes(userInput) || dates.includes(userInput))) { rows[i].classList.add('hide') } else { rows[i].classList.remove('hide') } } }Quiero ampliar la búsqueda. Así que lo que escribo 'Bill Gates' funciona, pero no cuando escribo 'Gates Bill'. Cualquier ayuda sería muy apreciada.
2 Respuestas
Responde la pregunta0
Invierta su lógica.
En lugar de decirle a cada fila que muestre/oculte,
haga que cada fila escuche el evento change / keyup en el cuadro de búsqueda .
Sí, eso significa un addEventListener para cada fila .
Search: <input type="text" value="foo bar"> <row-item>qux, baz, foo, bar</row-item> <row-item>corge, foo</row-item> <row-item>baz, quuz, bar, quux, foo</row-item> <row-item>baz, corge, bar, quuz</row-item> <row-item>bar</row-item> <row-item>corge, baz, quux</row-item> <row-item>baz, corge</row-item> <row-item>foo</row-item> <row-item>bar, quux, corge, foo</row-item> <style> row-item { display: block } </style> <script> customElements.define("row-item", class extends HTMLElement { connectedCallback() { document.querySelector("input") .addEventListener("keyup",(evt) => this.match(evt.target.value)); this.match("foo bar"); // for testing! } match(search) { let findWords = search.trim().split(" "); let rowWords = new Set(this.innerHTML.split(/, /)); let matched = findWords.map(word => rowWords.has(word)) .filter(Boolean) // remove false values .length == findWords.length; this.style.backgroundColor = matched ? "lightgreen" : "lightcoral"; } }) </script>0
Al igual que el primer comentario sugerido, parece que está tratando de hacer coincidir todas las palabras en la entrada de búsqueda con las filas/entradas.
Primero, para dividir la entrada en una matriz de varios términos, puede usar el método String .split(' ') para dividir en espacios. Por ejemplo:
"Bill Gates".split(' ') Esto daría como resultado una matriz que se parece a ['Bill', 'Gates']
Luego, puede recorrer la matriz de términos de búsqueda que creó con .split() y verificar si existen en una fila/entrada con el método String .includes() (como si estuviera verificando ahora mismo la cadena de entrada de userInput ).