Какой код я бы добавил в HTML, чтобы применить фильтры поиска?

Question

Я привел пример того, как это будет выглядеть ниже. Я пытаюсь закодировать таблицу поиска (скорее, nsfw) для использования людьми. Не знаю, как бы я кодировал фильтры для поиска. Я хочу иметь возможность искать по имени, использовать фильтры или, если у вас есть примененные фильтры, тогда панель поиска выполняет поиск результатов только внутри этих фильтров. Я использую только HTML, JS и CSS!

Образец изображения (это SFW)

Пожалуйста, не пропускайте из-за причина того, что это для веб-сайта NSFW ..

Answer 1

<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>

Answer 2

Если вы используете vanilla js, вы можете сделать HTML с формой и прослушать все изменения формы, когда пользователь щелкает, что-то вроде этого :

<form id="my-form">
  <input type="text" name="username">
  <input type="text" name="full-name">
  <input type="password" name="password">
  <button type="button" id="search">Search!</button>
</form>

const searchButton = document.getElementById("search")
const inputs = document.getElementById("my-form").elements;
const inputByIndex = inputs[0];
const inputByName = inputs["username"];

searchButton.addEventListener("click", functionWhichIWillCommunicateWithTheServer)

со значениями формы вы можете использовать что-то вроде fetch для связи с вашим сервером.

// The parameters of the endpoint are comming from the form
function functionWhichIWillCommunicateWithTheServer() {
  fetch("someEndpointWithTheirParameters")
    .then(res => res.json())
    .then(data => console.log(data))
}