CODEWITHSUNDEEP
jqueryhtmlcss
Zirc
Zirc

Reputation: 470

CSS Highlight selected text with search suggestion

I'm just a beginner in css and html. I would like to create a webpage that has a list of names and I should be able to select name/names from the list (can be more than one). I would like to know if there is a way for the background of the specific text to be highlighted instead of a box being checked on the side.

I would also like a search suggestion that can navigate throughout the list.

I have this piece of code that search for a specific label

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";

        }
    }
}

Along with this piece of code that displays the list

echo "<input type=\"checkbox\" name=\"check_list[]\" value=\"{$row['UserIndex']} class=\"studentUL\"\"><label><a>{$row['LName']}, {$row['FName']}, {$row['Year']}</a></label>";

But when I search, it displays this . Without any searches, it displays this

Thanks for the help :)

Upvotes: 0

Views: 237

Answers (1)

Remya CV
Remya CV

Reputation: 144

I saw a similar question at Javascript: Change label background color on checkbox that answers the part of your question except for search

Upvotes: 1

Related Questions