Блог

Главная - Вопросы по программированию - Расширенный поиск в Javascript

Расширенный поиск в Javascript

#javascript #arrays #search #polymer #web-component

#javascript #массивы #Поиск #полимер #веб-компонент

Вопрос:

Я пытаюсь внедрить панель поиска в проект. Он должен просто искать записи и скрывать строки, когда входные данные не совпадают. Это то, что я сделал, и это работает.

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

Я хочу расширить поиск. Так что то, что я пишу «Билл Гейтс», работает, но не тогда, когда я пишу «Билл Гейтс».
Любая помощь была бы очень признательна.

Комментарии:

1. вы можете разбить входные данные на несколько терминов и проверить поиск записей, содержащих все термины

Ответ №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:

Как и в первом комментарии из предложенных, похоже, что вы пытаетесь сопоставить все слова во входных данных поиска со строками / записями.

Во-первых, чтобы разбить входные данные на массив из нескольких терминов, вы можете использовать метод String .split(' ') для разделения на пробелы. Например:

 "Bill Gates".split(' ')

В результате получится массив, который выглядит как ['Bill', 'Gates']

Затем вы можете перебрать созданный вами массив поисковых запросов .split() и проверить, существуют ли они в строке / записи с помощью метода String .includes() (как вы сейчас проверяете userInput строку).).

Метки: