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

我试图从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))

const search=document.getElementById（'search'）；
const matchList=document.getElementById（'match-list'）；
const searchStates=异步searchText=>{
const res=await fetch（'../data/states.json'）；
const states=await res.json（）；
让matches=states.filter（state=>{
const regex=new RegExp（`^${searchText}`，'gi'）；
const str=JSON.stringify（state.postcode）；
返回str.match（regex）| state.place_name.match（regex）；
})
if（searchText.length==0）{
匹配项=[]；
matchList.innerHTML=“”
}
outputHtml（匹配）；
}
const outputHtml=匹配项=>{
如果（匹配。长度>0）{
const html=matches.map（match=>`

${match.postcode}${match.place\u name}
${match.state_name}


`).加入（“”）；
matchList.innerHTML=html；
}
}
search.addEventListener（'input'，（）=>searchStates（search.value））

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