我想使用搜索按钮为本地网页创建搜索/过滤器输入

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 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>
$(document).ready(function() {

    $("#btnExample").on("click", function() {

        var value = $("#myInput").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 -->
<button id="btnExample" type="button">Click Me</button