javascript - 将文本添加到输入并触发 ajax 搜索

Question

一个网站在一个表格中显示了很多项目。当我在顶部的搜索栏中键入内容时，表格会发生变化，它充当过滤器。这应该是自动化的(客户端)。

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

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

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

问题是，即使搜索栏内的文本显示“苹果”，下表也不会更新。如果我手动删除字母，它会立即更新并过滤结果。

有什么方法可以“模拟”实际按键以便更新表格吗？

---

编辑和几乎解决方案:

我一直在努力使这项工作成功，但每次都失败了。然后我开始学习一些 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>

希望对您有所帮助。