CODEWITHSUNDEEP
javascriptarrayssearchpolymerweb-component
JohnJonta
JohnJonta

Reputation: 175

Advanced 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.

Upvotes: 1

Views: 395

Answers (2)

Danny '365CSI' Engelman
Danny '365CSI' Engelman

Reputation: 21193

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>

Upvotes: 1

Stephen Gheysens
Stephen Gheysens

Reputation: 303

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).

Upvotes: 2

Related Questions