Onchange数据表搜索输入值过滤器

Question

我有一个文本字段，并尝试将文本字段值添加到数据表搜索输入字段，以便它可以基于添加的值进行搜索/过滤，但是即使该值出现在搜索输入字段中，它也不会过滤，直到键为按下，下面是我使用的代码，请让我知道是否有其他方法可以得到结果。

样本表在这里进行搜索：

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

我在这里有一个文本，单击此按钮时我需要“测试数据”值以添加到数据表搜索字段中并对其进行过滤：

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


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

Answer 1

从标题判断，搜索输入是由onchange事件触发的。 更改代码中的值不会触发此事件。 但是，您可以通过代码自己触发事件。

 $('#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> 

您的测试脚本如下所示。

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

Answer 2

由于您没有提供可复制的示例，因此我做出了很多猜测。 甚至无法测试结果。 这不是问JS问题的好格式。

但是似乎您希望输入框立即过滤表。 您可能需要input事件而不是change ，因此您无需按Enter键或使输入框失去焦点。

 $("#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...
}