Onchange datatable search input value filter

Question

I have a text field and trying to add the text field value to datatable search input field so that it can search/filter based on the value added, but even though the value is appearing in the search input field its not filtering until the key is pressed, below is the code which I used, please let me know if any other method to get the outcome.

sample table here for search:

<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
    </tbody>

i have an text here, on click of this i need "test data" value to add in datatable search filed and filter it:

<p id="test">test data</p>


<script>
 $("#test").on("click", function(){
  var Clickvalue = $(this).text();
  $("input").val(Clickvalue);
});
</script>

Answer 1

Judging on your title the search input is triggered by the onchange event. Changing the value in code does not trigger this event. However you can trigger the event yourself by code.

 $('#searchinput').on("change", function(){ console.log('triggered') }); $(".addSearch").on("click", function(){ var Clickvalue = $(this).text(); $("input").val(Clickvalue).trigger("change"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="searchinput"> <table id="example" class="display" style="width:100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tbody> <tr> <td class="addSearch">Tiger Nixon</td> <td class="addSearch">System Architect</td> <td class="addSearch">Edinburgh</td> <td class="addSearch">61</td> <td class="addSearch">2011/04/25</td> <td class="addSearch">$320,800</td> </tr> <tr> <td class="addSearch">Garrett Winters</td> <td class="addSearch">Accountant</td> <td class="addSearch">Tokyo</td> <td class="addSearch">63</td> <td class="addSearch">2011/07/25</td> <td class="addSearch">$170,750</td> </tr> </tbody> </table> 

Your test script would look like this.

$("#test").on("click", function(){
  var Clickvalue = $(this).text();
  $("input").val(Clickvalue).trigger("change");
});

Answer 2

As you are not providing a reproducible example, I make a lot of guess. And even cannot test the result. This is not a good format for asking JS question.

But seems like you want the input box immediately filter the table. You probably want a input event instead of change , so you don't need to press enter/ unfocus the input box.

 $("#test").on("click", function(){
  var Clickvalue = $(this).text();
  $("input").val(Clickvalue);
  search(Clickvalue);
});

$("input").on( "input",function(){
    console.log(this.value);
  search(this.value);
})

var data_source = {1:"Tiger Nixon",2:"Garrett Winters"}

function search(input){
  var available_arr = [];
  for (var key in data_source){
    if (data_source[key].indexOf(input) > 0){
        available_arr.append(key);
    }
  }
  //function_you_use_for_construct_table(available_arr);
}

function function_you_use_for_construct_table(arr){
    //blah blah...
}