Блог

Резюме: У меня есть строка поиска с 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 ввод и активировалась при вводе ключа, который успешно работал. Js для функции 1 ввода (ИМЯ, ДАТА РОЖДЕНИЯ или SSN) выглядит следующим образом:

Старая строка поиска 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"; }
   });
});
  

Теперь база данных для этих данных намного больше, поэтому я добавил дополнительные входные данные, которые я хочу выполнять только при нажатии кнопки или когда пользователь нажимает enter. Пользователь может ввести ИМЯ, ИМЯ ДАТА РОЖДЕНИЯ, ИМЯ ДАТА РОЖДЕНИЯ SSN или любую другую комбинацию.

УСИЛИЕ: Я создал простую функцию, которая выводит 3 входных значения на консоль. Из этого я знаю, что значение даты рождения (DoB) будет в формате ГГГГ-ММ-ДД (01.10.1998 становится 1998-10-01). Ограничив максимальный год 4 целыми числами, я переформатировал строку, чтобы соответствовать моим ожиданиям (ММ / ДД / ГГГГ).

Теперь я пытаюсь создать переменную, которая содержит введенные пользователем значения, и создать новый оператор .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
   }
  

Журнал консоли для ввода (ЛЮК АЙСИТТ, 01.10.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]
  

Вы могли бы сделать что-то вроде этого, где, если какой-либо из 3 входных данных (имя, дата или ssn) совпадает со столбцами, он будет отображаться, в то время как другие будут отфильтрованы.

Вот функция фильтрации, которая может быть вызвана нажатием клавиши на всех входных данных поиска или при нажатии кнопки отправки.

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