添加文本到输入AND触发ajax搜索

Question

网站在表格中显示很多项目。当我输入顶部的搜索栏时，表格会发生变化，该搜索栏充当过滤器。这应该是自动化的（客户端）。

我创建了一个Chrome扩展程序来运行该脚本。

问题：
我的脚本能够将搜索栏的值设置为我希望它使用的字符串：

document.getElementById('filter').value = "Apple";

问题是，即使搜索栏内的文字显示“apples”，下表也没有更新。如果我手动删除一封信，它会立即更新并过滤结果。

有没有办法“模拟”实际的按键，以便表格更新？

编辑并几乎解决方案：

我一直在努力工作，每次都失败了。然后我开始学习一点jquery并且过来了。一行代码。

$("#filter").val("apple").trigger('keyup');

完美无缺。

我还是非常感谢你，marcelino！你是一个很大的帮助，你努力解决我的问题！谢谢！

Edit_2和最终解决方案：

在Chrome扩展程序中使用它时，第一个“解决方案”无效。这个解决方案完美无缺。它会更改值，然后触发ArrowUp事件以触发过滤器。

var filter = document.getElementById("filter");
filter.value = "apple";
filter.dispatchEvent(new KeyboardEvent("keyup", {
    bubbles: true,
    cancelable: true,
    key: "ArrowUp"
  }));

解决方案： Different results between chrome console and extension

Answer 1

您可以通过以下方式模拟按键：

// more info about keypress simulation at:
// http://stackoverflow.com/a/5920206/1666547
// you don't have to understand how this part works
// just know that it makes the method "document.triggerKeyPress" 
// available for us to use to simulate keypresses
// put this somewhere at the beginning of your script
//Node.prototype.triggerKeyPress = function(char) {
//    var event = document.createEvent('Event');
//    event.initEvent('keyup', true, true);
//    event.keyCode = char.charCodeAt(0);
//    document.dispatchEvent(event);
//}

// this second part you should try your best to understand
// grab the filter element from the D.O.M.
var $filterElement = $('#filter')//document.getElementById('filter')
// set a value to the filter element if you need to
$filterElement.val('Apple')
// focus the cursor on it for typing
$filterElement.focus()
// grab the value from the filter input
// lets say that the "queryInput" is "Apple"
var queryInput = $filterElement.val()
// listen to the event
//window.addEventListener('keyup', function(event) {
  // var actualCharacter = String.fromCharCode(event.keyCode)
  // console.log('Typed:', actualCharacter)
//})

$filterElement.keyup(function (event) {
  var actualCharacter = String.fromCharCode(event.which)
  console.log('Typed:', actualCharacter)
})
// now we are going to iterate through each character of "queryInput"
// and fire a "keyup" event for each character so that table filter
// thinks that someone actually typed the word "Apple" and filters
// accordingly. 
queryInput
.split('') // make string into an array by splitting it on empty spaces
.forEach(function(letter) { // iterate over the characters "A-p-p-l-e"
  // using the "document.fire" method we created above
  var e = jQuery.Event('keyup');
  e.keyCode = letter.charCodeAt(0);
  e.which = letter.charCodeAt(0); // # Some key code value
  $filterElement.trigger(e);
  //document.triggerKeyPress(letter) // fire the "keypress" event
})

<input id="filter" type="text" name="fname">
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

我希望有所帮助。