Creé una lista de búsqueda o una lista de filtros. Pero quiero agregar estas características:
Intento agregar muchas funciones de javascript pero no funciona. Si conoces alguna forma alternativa por favor comparte.
function myFunction() { var input, filter, ul, li, a, i, txtValue; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); ul = document.getElementById("myUL"); li = ul.getElementsByTagName("li"); for (i = 0; i < li.length; i++) { a = li[i].getElementsByTagName("a")[0]; txtValue = a.textContent || a.innerText; if (txtValue.toUpperCase().indexOf(filter) > -1) { li[i].style.display = ""; } else { li[i].style.display = "none"; } } } * { box-sizing: border-box; } #myInput { background-image: url('/css/searchicon.png'); background-position: 10px 12px; background-repeat: no-repeat; width: 100%; font-size: 16px; padding: 12px 20px 12px 40px; border: 1px solid #ddd; margin-bottom: 12px; } #myUL { list-style-type: none; padding: 0; margin: 0; } #myUL li a { border: 1px solid #ddd; margin-top: -1px; /* Prevent double borders */ background-color: #f6f6f6; padding: 12px; text-decoration: none; font-size: 18px; color: black; display: block } #myUL li a:hover:not(.header) { background-color: #eee; } <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name"> <ul id="myUL"> <li><a href="#">Adele</a></li> <li><a href="#">Agnes</a></li> <li><a href="#">Billy</a></li> <li><a href="#">Bob</a></li> <li><a href="#">Calvin</a></li> <li><a href="#">Christina</a></li> <li><a href="#">Cindy</a></li> </ul>No estaba claro si el texto que se iba a poner en negrita debía ser solo la parte de la cadena escrita o la cadena completa, por lo que a continuación hay una parte de comentario que hace que la palabra completa esté en negrita. El enfoque alternativo, que utiliza una lista de datos, no necesita codificación adicional para la funcionalidad básica y es el enfoque más común para este tipo de problema en las interwebs.
function myFunction(e) { // find all `li` > a elements let col=document.querySelectorAll('ul#myUL li a'); // iterate through all elements; re-hide & remove className from each. col.forEach(n=>{ n.parentNode.style.display='none'; n.classList.remove('bold'); // if the typed value matches the beginning of a list item; display the text & assign Bold className if( this.value.length > 0 && this.value.trim()!='' && n.textContent.toLowerCase().startsWith( this.value.toLowerCase() ) ){ n.parentNode.style.display='block'; // make the whole word bold //n.classList.add('bold'); // make the matched portion bold n.innerHTML = `<span class="bold">${this.value}</span>` + n.textContent.substr(this.value.length) } }); } document.querySelector('input[name="search"]').addEventListener('keyup',myFunction); * { box-sizing: border-box; } #myInput { background-image: url('/css/searchicon.png'); background-position: 10px 12px; background-repeat: no-repeat; width: 100%; font-size: 16px; padding: 12px 20px 12px 40px; border: 1px solid #ddd; margin-bottom: 12px; } #myUL { list-style-type: none; padding: 0; margin: 0; } #myUL li{ display:none; } #myUL li a { border: 1px solid #ddd; margin-top: -1px; /* Prevent double borders */ background-color: #f6f6f6; padding: 12px; text-decoration: none; font-size: 18px; color: black; display: block } #myUL li a:hover:not(.header) { background-color: #eee; } .bold{font-weight:bold;color:red <h5>The original approach</h5> <input name='search' type="text" placeholder="Search for names.." title="Type in a name" /> <ul id="myUL"> <li><a href="#">Adele</a></li> <li><a href="#">Agnes</a></li> <li><a href="#">Billy</a></li> <li><a href="#">Bob</a></li> <li><a href="#">Calvin</a></li> <li><a href="#">Christina</a></li> <li><a href="#">Cindy</a></li> </ul> <h5>An alternative involving no Javascript for a similar end result using a datalist</h5> <input type='text' name='dlsearch' list='dls' /> <datalist id='dls'> <option>Adele <option>Agnes <option>Billy <option>Bob <option>Calvin <option>Christina <option>Cindy </datalist>