We have a text input that shows suggestions when we enter values into it. The input value should be reset when the input field loses focus:
const input = document.querySelector('#input');
const suggestions = document.querySelector('#suggestions');
const items = [
"test",
"test-2",
"some-other-value",
"etc",
"more suggestions"
];
function getListItem(item) {
return `<li>${item}</li>`;
}
input.addEventListener('input', filter);
input.addEventListener('focusout', (event) => {
event.target.value = "";
filter(event);
});
function filter(event) {
const value = event.target.value;
const filteredSuggestions = items.filter(item => item.includes(value.toLowerCase()));
let htmlContent = '';
for (const item of filteredSuggestions) {
htmlContent += getListItem(item);
}
suggestions.innerHTML = htmlContent;
};
<input id="input" />
<ul id="suggestions">
</ul>
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…