i want to create a search/filter input for a local webpage with a search button

Question

I have a local page search input box which work great, it filters as you type. What i need is for it to work only when i press a button. So basically the lookup data will be put in the input box and only actually execute the search/filter function when the button is pressed.

This is what i have, there are countless solutions like this across the web, and there are countless solutions that make the button work with php as a submit button, which is not what i want.

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

Can anybody help please

Thanks in advance

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