Si escribe una palabra en el campo de entrada de búsqueda, aparece una lista de sugerencias a continuación.

Me gustaría poder seleccionar la palabra de la lista, por ejemplo, Maine (ME) y luego completar el campo de entrada de búsqueda. ¿Cómo manipularía mi código para poder hacer esto, por favor?

HTML

 <form action="*"> <div class="form-group"> <input type="text" class="rounded form-control" id="search" autocomplete="off" placeholder="Current Location"> </div> <div id="match-list" onclick="myFunction()"></div> </form>

javascript

 const search = document.getElementById('search'); const matchList = document.getElementById('match-list'); // Search states.json and filter it const searchPlaces = async searchText => { const res = await fetch('../data/states.json'); const states = await res.json(); // Get matches to current text input let matches = states.filter(state => { const regex = new RegExp(`^${searchText}`, 'gi'); return state.name.match(regex) || state.abbr.match(regex); }); 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"> <h6>${match.name} (${match.abbr})</h6> </div> `).join(''); matchList.innerHTML = html; } }; search.addEventListener('keyup', () => searchPlaces(search.value)); function myFunction() { document.getElementById("search").innerHTML = "text"; }

json

 [ { "abbr": "AL", "name": "Alabama", }, { "abbr": "ME", "name": "Maine", } ]