Page Loading...
Run
Break Lines
Result
<!DOCTYPE html> <html> <head> <style> input{ background-image: url(icons/search.png); background-position: 10px center; background-repeat: no-repeat; border: 1px solid #ccc; border-radius: 2px; width: 100%; padding: 12px 20px 12px 40px; font-size: 16px; outline: none; } ul{ padding: 0; margin: 20px 0; } ul li{ list-style-type: none; border: 1px solid #ddd; padding: 10px; border-collapse: collapse; margin-top: -1px; } li:hover{ cursor: pointer; background: #eee; } </style> </head> <body> <h2>Create a search filter with JavaScript: </h2> <input type="text" placeholder="Search..." onkeyup="filter(this.value);"> <ul id="cont"> <li>Agra</li> <li>Aligarh</li> <li>Meerut</li> <li>Raipur</li> <li>Ranchi</li> <li>Delhi</li> <li>Kanpur</li> <li>Mumbai</li> </ul> <script> let ul = document.querySelector('#cont'); function filter(inputTxt){ inputTxt = inputTxt.toLowerCase(); for(let i=0;i<ul.children.length;i++){ if(!ul.children[i].innerText.toLowerCase().includes(inputTxt)){ ul.children[i].style.display = 'none'; }else{ ul.children[i].style.display = ''; } } } </script> </body> </html>