0
93
VistasAdvanced search in Javascript
I try to implement a search bar in a project. It should just search for the entries and hide the rows, when the input doesn't match. This is what I did and it's working.
_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')
}
}
}I want to extend the search. So what I write 'Bill Gates' it works, but not when I write 'Gates Bill'. Any help would be much appreciated.
2 Respuestas
Responde la pregunta0
Reverse your logic.
Instead of telling each row to show/hide,
make each row listen to the change/keyup event on the search box.
Yes, that means an addEventListener for every row.
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
Like the first comment from suggested, it sounds like you are trying to match all words in the search input to the rows/entries.
First, to break the input into an array of multiple terms, you could use the String method .split(' ') to split on spaces. For example:
"Bill Gates".split(' ')
This would result in an array that looks like ['Bill', 'Gates']
Then, you could loop through the array of search terms you created with .split() and check if they exist in a row/entry with the String .includes() method (like you're checking right now on the userInput string).