As a beginner in the world of css and html, I am eager to create a webpage that showcases a list of names with the ability to select one or multiple names. Instead of simply checking a box on the side, I would love for the background of the selected text to be highlighted.
In addition, I am looking to implement a search suggestion feature that allows users to easily navigate through the list.
I have already written a piece of code that searches for specific labels:
function Search() {
var input, filter, form, label, a, i;
input = document.getElementById("Input");
filter = input.value.toUpperCase();
form = document.getElementById("Input");
label = ul.getElementsByTagName("label");
for (i = 0; i < li.length; i++) {
a = label[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
label[i].style.display = "";
} else {
label[i].style.display = "none";
}
}
}
Additionally, here's the code I've used to display the list:
echo "<input type=\"checkbox\" name=\"check_list[]\" value=\"{$row['UserIndex']}\" class=\"studentUL\"><label><a>{$row['LName']}, {$row['FName']}, {$row['Year']}</a></label>";
However, when I perform a search, it displays this result. Without any searches, it shows this layout.
Thank you in advance for your assistance :)