显示用户搜索的结果，最多使用三个输入

Question

总结：我有一个包含 3 个输入的搜索栏：姓名、出生日期和 SSN。以下是一个<ul>，其中包含相应的 3 列和数据。

新的搜索栏 HTML：

<div class="adv-searchbar">
        <div class="adv-searchbar__wrapper">
            <span>Search people in database. . .</span>
            <div class="adv-searchbar__wrapper__search-box">
                <span class="search__column-1"><img src="/img/person-name.png" class="search__input-ico"/><input type="text" class="search__input" id="search__adv-input-1" placeholder="John Adam Smith"></span>
                <span class="search__column-2"><input type="date" class="search__input" id="adv-input-2" placeholder="MM / DD / YY"></span>
                <span class="search__column-3"><img src="/img/person-ssn.png" class="search__input-ico"/><input type="text" class="search__input" id="search__adv-input-3" placeholder="### - ## - ####"></span>
                <button type="submit" class="advSearchBtn"><img src="/img/search_white.png"/></button>
            </div>
        </div>
    </div>

表格 HTML（只有一项）：

            <div class="table_body">
            <ul>
                <li><div class="item">
                    <div class="column-1">
                        <span>Luke Isitt</span>
                    </div>
                    <div class="column-2">
                        <span>10 / 01 / 1998</span>
                    </div>
                    <div class="column-3">
                        <span>123-45-6789</span>
                    </div>
                </div></li>
            </ul>
        </div>

以前我用一个搜索栏创建了这个，该搜索栏接受 1 个输入并在 keyup 上激活，它成功运行。 1 输入（姓名、出生日期或 SSN）函数的 Js 如下所示：

旧的搜索栏 HTML

        <div class="wrapper">
        <div class="header">
            <div class="search_box">
                <img src="~/asset/img/search_grey.png" class="search-icon">
                <input type="text" id="search_input" placeholder="Type to search...">
            </div>
        </div>
    </div>

旧的搜索栏功能

search_input.on("keyup", function (e) {
   let search_item = e.target.value.toLowerCase();
   let inputs = document.querySelectorAll('.table_body .item');

   inputs.forEach(function (item) {
       if (item.textContent.toLowerCase().indexOf(search_item) != -1) {
           item.closest('li').style.display = "block";
       } else { item.closest('li').style.display = "none"; }
   });
});

现在这个数据的数据库要大得多，所以我添加了可选输入，我只想在按钮单击或用户按下回车时执行这些输入。用户可以输入姓名、姓名 + 出生日期、姓名 + 出生日期 + SSN，或任何其他组合。

EFFORT：我创建了一个简单的函数，将 3 个输入值输出到控制台。由此，我知道出生日期 (DoB) value 的格式为 YYYY-MM-DD（10/01/1998 变为 1998-10-01）。通过将最大年份限制为 4 个整数，我重新格式化了字符串以满足我的期望 (MM/DD/YYYY)。

现在我正在尝试创建一个保存用户输入值的变量，并创建一个新的 .forEach() 语句，该语句循环遍历“.data_table .item”，但这就是我卡住的地方。我仍然可以获得 1 个输入的结果，但不是全部 3 个。不幸的是，大多数可用的搜索栏资源都是针对 1 个输入的。

   function searchEntries() {
      let values = [...$('.search__input')]; // works
      console.log(values[0].value, values[1].value, values[2].value); // works
      console.log(values);

      // unsure how to progress
   }

输入的控制台日志（LUKE ISITT，10/01/1998/123-45-6789）：

LUKE ISITT 1998-10-01 123-45-6789
index.js:39 (3) [input#search__adv-input-1.search__input, input#adv-input-2.search__input, input#search__adv-input-3.search__input]

Answer 1

您可以执行类似的操作，如果 3 个输入（姓名、日期或 ssn）中的任何一个与列匹配，则会显示该列，而过滤掉其他输入。

这是一个过滤器函数，可以在所有搜索输入或单击提交按钮时通过 keyup 调用。

function searchEntries() {
  let name = $("#search__adv-input-1").value.toLowerCase();
  let date = $("#search__adv-input-2").value;
  let ssn = $("#search__adv-input-3").value; // not secure to display SSNs

  return { name, date, ssn };
}

function filterItems() {
  let { name, date, ssn } = searchEntries(); // returns an object, then destructuring it
  let inputs = document.querySelectorAll(".table_body .item");

  inputs.forEach(function (item) {
    let columnName = item.querySelector(".column-1").textContent.toLowerCase();
    let columnDate = item.querySelector(".column-2").textContent;
    let columnSSN = item.querySelector(".column-3").textContent; // not secure to display SSNs

    if (
      columnName.indexOf(name) !== -1 ||
      columnDate.indexOf(date) !== -1 ||
      columnSSN.indexOf(ssn) !== -1
    ) {
      item.closest("li").style.display = "block";
    } else {
      item.closest("li").style.display = "none";
    }
  });
}

search_input_name.on("keyup", filterItems);
search_input_date.on("keyup", filterItems);
search_input_ssn.on("keyup", filterItems);
// or
searchBtn.on("click", filterItems);