CODEWITHSUNDEEP
javascriptjqueryfilter
Cihan Sulu
Cihan Sulu

Reputation: 39

Jquery Keyup Filter And Input Value Problem

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>

Upvotes: 1

Views: 536

Answers (1)

Avinash Dalvi
Avinash Dalvi

Reputation: 9301

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>

Upvotes: 1

Related Questions