我正在尝试从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))
现在,如何选择列表值,使其显示在文本字段中。