Jquery Keyup 过滤器和输入值问题

Question

I'm searching in the table with jquery. Searching with keyboard is working but filtering with button does not work Please click to button.

I want it to be added to the input and search when the button is clicked

Sample:

 /* Searching with keyboard */ $(document).ready(function(){ $("#search").on("keyup", function() { var value = $(this).val().toLowerCase(); $("table td").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); }); }); /*Searching with button */ $("button").click(function(){ var id = $(this).attr("data-id"); $("#search").val(id); });

 table tr td{ border:1px solid #000; }

 <input type="text" id="search" placeholder="Search"><br> <button type="button" data-id=""> Facebook</button> <button type="button" data-id=""> Facebook</button> <p>Searching with keyboard is working but filtering with button does not work. <br>Please click to button.</p> <table> <thead> <tr> <td>Hood 1</td> <td>Hood 2</td> </tr> </thead> <tbody> <tr> <td> Facebook</td> <td> Facebook</td> </tr> <tr> <td> Twitter</td> <td> Twitter</td> </tr> </tbody> </table> <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

Answer 1

You are missing call for search keyup function on button click

 /* Searching with keyboard */ $(document).ready(function(){ $("#search").on("keyup", function() { var value = $(this).val().toLowerCase(); $("table td").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); }); }); /*Searching with button */ $("button").click(function(){ var id = $(this).attr("data-id"); $("#search").val(id); $('#search').keyup(); });

 table tr td{ border:1px solid #000; }

 <input type="text" id="search" placeholder="Search"><br> <button type="button" data-id=""> Facebook</button> <button type="button" data-id=""> Twitter</button> <p>Searching with keyboard is working but filtering with button does not work. <br>Please click to button.</p> <table> <thead> <tr> <td>Hood 1</td> <td>Hood 2</td> </tr> </thead> <tbody> <tr> <td> Facebook</td> <td> Facebook</td> </tr> <tr> <td> Twitter</td> <td> Twitter</td> </tr> </tbody> </table> <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>