Вставка автозаполнения предложений 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.Как вернуть объект, который я могу перебрать, и поместить onclick в каждое предложение HTML в этом объекте?

Или, как вернуть несколько объектов, каждый из которых содержит одно предложение HTML, по которому я могу затемпоставить onclick?

или какой-нибудь третий вариант?

Answer 1

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