javascript - 将自动完成 HTML 建议插入搜索栏中

Question

自动完成脚本:

const search = document.getElementById('search');
const matchList = document.getElementById('match-list');
let states;

// Get states
const getStates = async () => {
 const res = await fetch('../complete/data/pictures.json');
 states = await res.json();
};

// FIlter states
const searchStates = searchText => {
 // Get matches to current text input
 let matches = states.filter(state => {
  const regex = new RegExp(`^${searchText}`, 'gi');
  return state.title.match(regex);
 });

 // Clear when input or matches are empty
 if (searchText.length === 0) {
  matches = [];
  matchList.innerHTML = '';
 }

 outputHtml(matches);
};

// Show results in HTML
const outputHtml = matches => {
 if (matches.length > 0) {
  const html = matches
   .map(
    match => `<div class="card card-body mb-1">
    <h4>${match.title}</h4>
   </div>`
   )
   .join('');
  matchList.innerHTML = html;
 }
};
window.addEventListener('DOMContentLoaded', getStates);
search.addEventListener('input', () => searchStates(search.value));

上面的代码生成自动完成 HTML 建议。我想添加可点击的功能，它将在搜索栏中插入点击的 html 元素。

我得到的最接近的是:

matchList.addEventListener('click', () => {search.value = matchList.textContent.trim()})

虽然这在只有一个建议的情况下有效，但如果有更多建议，则所有建议都会插入在一起。

问题似乎在于 matchList 是一个返回单个 HTML 元素的对象。如何返回一个可以迭代的对象，并在该对象内的每个 HTML 建议上放置 onclick ？

或者，如何返回多个对象，每个对象都包含一个 HTML 建议，然后我可以在其上放置 onclick？

或者第三种选择？

Answer 1

matchList.addEventListener('click', e => search.value = e.target.textContent.trim())