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>
2.1m questions
2.1m answers
60 comments
57.0k users