Currently, I have implemented a filter search box that displays results as soon as a single letter is inputted. However, due to the large amount of data that needs to be filtered through, I would like the search to only show results when a minimum of two letters are entered.
I have attempted to find a solution for this issue but unfortunately, my knowledge of JavaScript is limited and I have not been successful. If there is a simple fix for this problem, I apologize for my lack of understanding.
The code I am currently using is:
document.querySelector('#searchInput').addEventListener('input', () => {
let filter = document.querySelector('#searchInput').value.toUpperCase();
document.querySelectorAll('#productli li').forEach(el => {
let a = el.querySelector('a'); // gets the first only
el.style.display = filter && (a.textContent || a.innerText).toUpperCase().indexOf(filter) != -1 ? 'list-item' : 'none';
});
});#productli li {
display: none;
list-style-type: none;
}<input type="text" id="searchInput" placeholder="Enter your search term here">
<ul id="productli">
<li><a href="#">Product 1</a></li>
<li><a href="#">Product 2</a></li>
<li><a href="#">Product 3</a></li>
</ul>