Advanced search in Javascript

Question

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.

Answer 1

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>