Установка автозаполнения предложения HTML в строке поиска

Скрипт автозаполнения:

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()})

В то время как это работает, если есть только одно предложение, если есть еще, все предложения вставляются вместе.

Проблема, кажется, тот факт, что -это объект, который возвращает один элемент HTML. Как мне вернуть объект, который я могу перебрать и поставить onclick на каждое предложение HTML в этот объект?

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

Или какой-то третий вариант?

+1
2019-09-19 18:15:34
источник
0 ответов

Посмотрите другие вопросы по меткам