使用javascript从自动完成列表中选择选项

Question

我正在尝试从JSON文件中获取数据并将其显示在自动完成列表中。自动完成列表按预期工作，但我想从列表中选择一个值，使其显示在文本字段中。

该表单具有以下字段：

<div class="form-group">
    <div class="dropdown">
        <input type="text" class="form-control" id="search" name="location">
        <div class="dropdown-content" id="match-list">
    </div>
    </div>
    </div>
  

这是用于创建自动完成列表的代码：

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

const searchStates = async searchText => {
const res = await fetch('../data/states.json');
const states = await res.json();
let matches = states.filter(state=>{
    const regex = new RegExp(`^${searchText}`,'gi');
    const str= JSON.stringify(state.postcode);
    return str.match(regex) || state.place_name.match(regex);
})

if(searchText.length === 0){
    matches = [];
    matchList.innerHTML = ''
}

outputHtml(matches);

}

const outputHtml = matches =>{
    if(matches.length > 0){
        const html = matches.map(match => `
        <ul>
        <li>${match.postcode} ${match.place_name}
        ${match.state_name}
        </li>
        </ul>
        `).join('');
        matchList.innerHTML =  html;
    }
}

search.addEventListener('input',()=> searchStates(search.value))

现在，如何选择列表值，使其显示在文本字段中。