If you type a word into the search input field a suggestion list appears below.

I would like to be able to select the word from the list e.g Maine (ME) and have it then populate the search input field. How would I manipulate my code to be able to do this please?

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",
    }
]