我想为带有搜索按钮的本地网页创建搜索/过滤器输入

Question

我有一个本地页面搜索输入框，效果很好，它会在您输入时进行过滤。我需要的是它只有在我按下按钮时才能工作。所以基本上查找数据将被放入输入框中，并且只有在按下按钮时才实际执行搜索/过滤功能。

这就是我所拥有的，整个网络上有无数这样的解决方案，并且有无数的解决方案可以使按钮与 php 一起作为提交按钮工作，这不是我想要的。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

 

 <script>

$(document).ready(function(){

  $("#myInput").on("keyup", function() {

    var value = $(this).val().toLowerCase();

    $("#myDIV *").filter(function() {

      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)

    });

  });

});

</script> 

 <input id="myInput" type="text" placeholder="Search for word or phrase..">

  <div id="myDIV">  <!-- div:called from search script -->

Answer 1

<script&nbsp;src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><script>$(document).ready(function() {&nbsp; &nbsp; $("#btnExample").on("click", function() {&nbsp; &nbsp; &nbsp; &nbsp; var value = $("#myInput").val().toLowerCase();&nbsp; &nbsp; &nbsp; &nbsp; $("#myDIV").filter(function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });});</script>&nbsp;<input id="myInput" type="text" placeholder="Search for word or phrase.."><div id="myDIV">&nbsp; <!-- div:called from search script --><button id="btnExample" type="button">Click Me</button