Javascript 中的高级搜索答案

【问题标题】：Advanced search in JavascriptJavascript 中的高级搜索
【发布时间】：2021-10-12 19:21:06
【问题描述】：

我尝试在项目中实现搜索栏。当输入不匹配时，它应该只搜索条目并隐藏行。这就是我所做的，它正在发挥作用。

  _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')
      }
    }
  }

我想扩展搜索。所以我写的“比尔盖茨”是有效的，但当我写“盖茨比尔”时就不行了。任何帮助将不胜感激。

【问题讨论】：

您可以将输入分解为多个术语并检查搜索包含所有术语的条目

标签： javascript arrays search polymer web-component

【解决方案1】：

颠倒你的逻辑。

不是告诉每一行显示/隐藏，
让每一行收听change/keyup事件在搜索框上。

是的，这意味着每一行都有一个addEventListener。

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>

【讨论】：

【解决方案2】：

就像建议的第一条评论一样，听起来您正在尝试将搜索输入中的所有单词与行/条目匹配。

首先，要将输入分解为多个术语的数组，您可以使用the String method .split(' ') 分割空格。例如：

"Bill Gates".split(' ')

这将产生一个看起来像['Bill', 'Gates']的数组

然后，您可以遍历使用.split() 创建的搜索词数组，并使用the String .includes() method 检查它们是否存在于行/条目中（就像您现在正在检查userInput 字符串一样）。

【讨论】：