我将在 HTML 中输入什么代码来应用搜索过滤器?

Question

我在下面提供了一个示例。我正在尝试编写一个(而不是 nsfw(搜索表供人们使用。我不确定如何为搜索编写过滤器代码。我希望能够按名称搜索，使用过滤器，或者如果您应用了过滤器，则搜索栏仅搜索这些过滤器内的结果。我只使用HTML，JS和CSS！

示例图像(这是 SFW(

请不要跳过，因为这是针对NSFW网站的原因。

Answer 1

如果您使用的是 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))
}

Answer 2

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