单击搜索按钮后开始搜索

Question

单击搜索按钮时，我必须启动搜索。因此，我在搜索按钮上添加了单击事件。当我单击按钮时，启动搜索功能将被调用。该功能在输入元素上添加了一个事件。现在，假设我已经键入corm，然后单击搜索按钮，什么也不会发生。但是，如果我以后键入其他内容，则会激活其他搜索。如何正确执行？

document.querySelector('.searchBtn').addEventListener('click', 
startSearch); //button

const inputSearch = document.querySelector('.inputSearch');

function startSearch(){
    inputSearch.addEventListener('keyup', searchFunction);
}

Answer 1

加载html文档后，您将必须立即设置事件侦听器（请参阅 domcontentloaded事件）。单击搜索按钮后，您将注册事件处理程序，但是在单击时需要启动搜索，因此您需要在此之前设置事件处理程序。然后在事件处理程序中激活搜索功能。仅当事件发生之前设置事件处理程序时，才可以注册事件。

一旦输入字段中的值更改或单击搜索按钮，以下实现将启动搜索。

function searchFunction(searchTerm) {
  console.log(`Searching for ${searchTerm}...`)
}

window.addEventListener("DOMContentLoaded", (e) => {
  const btn = document.querySelector(".searchBtn");
  const input = document.querySelector(".inputSearch");

  btn.addEventListener("click", (e) => {
    // get value of input field first
    searchFunction(input.value);
  });
  input.addEventListener("keyup", (e) => searchFunction(e.target.value));
});

<input class="inputSearch" />
<button class="searchBtn">Search</button>