在 Javascript 中手動操作輸入時，如何確保觸發鍵盤事件？

Question

我在 RedBubble.com 網站上，想模擬有人在搜索框中輸入內容。 當有人在其中輸入內容時，會有一個 window 顯示搜索建議等數據......

我打開我的控制台。 我輸入以下內容：

let searchbar = document.querySelector('input[name="query"]');
searchbar.value = 'Cat';

這會導致搜索欄顯示單詞 cat，但它不會產生焦點或觸發 window，如果您單擊搜索框，通常會出現這種情況。

在谷歌上，我可以對搜索欄做類似的事情，然后在使用這樣的代碼時讓它顯示關鍵字建議：

searchbar.click();

但是當我嘗試在我的控制台中的 RedBubble 網站上做同樣的事情時，我錯過了一些東西。

這是我希望看到的：

Answer 1

建議對話框 window 由<input name="query">元素上的focus事件觸發。 您可以通過創建和調度您自己的事件來模擬該事件。

const focusEvent = new Event('focus');
document.querySelector('input[name="query"]').dispatchEvent(focusEvent);

但是，似乎不可能根據輸入的value顯示結果。 該邏輯似乎是由 React 應用程序中的邏輯決定的。

Answer 2

那是因為點擊事件不在輸入上，而是在搜索圖標按鈕上，

你需要做：

document.querySelector('button[type=submit]').click()

Answer 3

你可以添加這個：

searchbar.addEventListener("input", function(){
    //do something
});

積極傾聽輸入