如何将这个addEventListener更改为按钮单击

Question

所以我有这个搜索json javascript，它将结果与您输入的内容相匹配，并自动执行。这些行是做什么的（下）。是否有任何方法可以将其更改为仅在按下按钮时才起作用？

const searchInput = document.querySelector('.search');
const suggestions = document.querySelector('.suggestions');

searchInput.addEventListener('change', displayMatches);
searchInput.addEventListener('keyup', displayMatches);

这是功能-

 function displayMatches() {
    const matchArray = findMatches(this.value, name);  
    const html = matchArray.map(place => {
        const regex = new RegExp(this.value);
        const nameName = place.name.replace(regex, `<span class="hl">${this.value}</span>`);
        return `
        <a href="${place.url}" target="_blank">
            <li>
                <span class="name">${nameName} <br> ${(place.price)}</span> 
                <img src="${place.imgurl}" alt="Drink Image" height="87.5" width="100">
            </li>
        </a>
        `;
    }).join('');
    suggestions.innerHTML = html;
}

下面所有当前代码：

const endpoint = "https://gist.githubusercontent.com/valeriu7474/4df04fafd994c2f778847a3e94451b44/raw/d288ddbc9cbc8bbcf89a10f2a8ead9eecb4962f6/allcurrentshops";

const name = [];
fetch(endpoint).then(blob => blob.json())
.then(data => name.push(...data));

    function findMatches(wordToMatch, name) {
        return name.filter(place => {
            //we need to figure out if the name match
            const regEx = new RegExp(wordToMatch, 'gi');
            return place.name.match(regEx);
        });
    }

//   function displayMatches() {
//      const matchArray = findMatches(this.value, name);  
//      const html = matchArray.map(place => {
//          const regex = new RegExp(this.value);
//          const nameName = place.name.replace(regex, `<span class="hl">${this.value}</span>`);
//          return `
//          <a href="${place.url}" target="_blank">
//              <li>
//                  <span class="name">${nameName} <br> ${(place.price)}</span> 
//                  <img src="${place.imgurl}" alt="Drink Image" height="87.5" width="100">
//              </li>
//          </a>
//          `;
//      }).join('');
//      suggestions.innerHTML = html;
//  }

function displayMatches() {
    const searchText = document.querySelector('.search');
    const matchArray = findMatches(searchText, name); 
    const html = matchArray.map(place => { 
        const regex = new RegExp(searchText); 
        const nameName = place.name.replace(regex, <span class="hl">${searchText}</span>);
    return ` <a href="${place.url}" target="_blank"> <li> <span class="name">${nameName} <br> ${(place.price)}</span> <img src="${place.imgurl}" alt="Drink Image" height="87.5" width="100"> </li> </a> `; }).join(''); suggestions.innerHTML = html; 
}

//  const searchInput = document.querySelector('.search');
//  const suggestions = document.querySelector('.suggestions');

    const searchBtn = document.querySelector('.btn-search');
    searchBtn.addEventListener('click', displayMatches);

Answer 1

从.search字段中删除事件侦听器，并添加一个按钮。

const searchBtn = document.querySelector('.searchBtn');
searchBtn.addEventListener('click', displayMatches);

编辑：如果我正确地解释了该函数，请为输入的搜索文本使用新变量来更新displayMatches。

function displayMatches() {
    const searchText = document.querySelector('.search').value;
    const matchArray = findMatches(searchText, name); 
    const html = matchArray.map(place => { 
        const regex = new RegExp(searchText); 
        const nameName = place.name.replace(regex, <span class="hl">${searchText}</span>);
        return ` <a href="${place.url}" target="_blank"> <li> <span class="name">${nameName} <br> ${(place.price)}</span> <img src="${place.imgurl}" alt="Drink Image" height="87.5" width="100"> </li> </a> `; 
    }).join(''); 
    suggestions.innerHTML = html; 
}