Entonces, lo que estoy tratando de hacer es crear una barra de búsqueda reactiva de JavaScript, pero mis variables se muestran como una lista. ¿Hay alguna manera de ocultar los elementos y aparecen cuando escribo el nombre?
Entonces, lo que estoy tratando de hacer es crear una barra de búsqueda reactiva de JavaScript, pero mis variables se muestran como una lista. ¿Hay alguna manera de ocultar los elementos y aparecen cuando escribo el nombre?
box-sizing: border-box; } #myInput { 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; } </style> </head> <body> <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Database içinde ara..." title="Type in a name"> <ul id="myUL"> <li><a href="http://127.0.0.1/duzenle.php?cariid=0000000104">Selen Hasan</a></li> <li><a href="http://127.0.0.1/duzenle.php?cariid=0000000106">Metin Özkan</a></li> <li><a href="http://127.0.0.1/duzenle.php?cariid=0000000128">Metin Tekin</a></li> <li><a href="http://127.0.0.1/duzenle.php?cariid=0000000130">Erdal Aşık</a></li> </ul> 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"; } } } </body> </html> `