以编程方式搜索网格 js table（使用 javascript）

Question

使用gridjs.io，我想在初始化gridjs table 时执行搜索。更一般地说，我想知道如何在用户不使用输入字段的情况下以编程方式使用搜索。

我尝试了什么：

已启用搜索插件（使用输入字段时搜索效果非常好）
我尝试通过使用 javascript 选择输入字段并更改它来“最小化”用户输入我的关键字的价值。这没有过滤 table。仅当手动输入已应用过滤。

示例代码无效:

HTML

<div id="wrapper"></div>

Javascript

const grid = new Grid({
  columns: ['Name', 'Email', 'Phone Number'],
  search: true,
  data: [
    ['John', 'john@example.com', '(353) 01 222 3333'],
    ['Mark', 'mark@gmail.com',   '(01) 22 888 4444'],
    ['Eoin', 'eo3n@yahoo.com',   '(05) 10 878 5554'],
    ['Nisen', 'nis900@gmail.com',   '313 333 1923']
  ]
});
grid.render(document.getElementById("wrapper"));

// SEARCH/FILTER WITH JAVASCRIPT (NOT WORKING):
document.querySelector("input.gridjs-input").value = "John";

结果网格应该被过滤，但它仍然显示所有行。未调度过滤器事件。如何使用 javascript 发送事件？

Answer 1

输入元素附加了一个输入事件侦听器(Image)

您可以使用以下代码创建和发送事件：

// Find the gridjs searchbox and set the value
var el = document.querySelector('.gridjs-search-input');
el.value = newVal;

// Create and dispatch the event
var event = new Event('input', {
    bubbles: true,
    cancelable: true,
});
el.dispatchEvent(event);

以编程方式搜索网格 js table（使用 javascript）

Programatically search gridjs table (with javascript)

gridjs