"Enhance User Experience: Use CSS to highlight text selection based on

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 :)

Answer №1

While browsing through resources, I came across a question discussing changing label background color on checkboxes in Javascript. You may find it helpful: Javascript: Change label background color on checkbox

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Leveraging the jQuery live() function to optimize heavy usage of Ajax on a website

Trying to ensure that all scripts are properly executed as content is loaded and removed from the page using jQuery load has been a challenge. The most effective approach so far has been the live function, but I have encountered difficulties in getting it ...

Organizing an Ordered List of Items into Alternating Columns Using HTML

I am in the process of developing a responsive HTML design to showcase an array of organized data. For smaller screens, the layout will consist of a single column displaying items sequentially. However, on larger screens, the design should adapt to featur ...

Expanding and collapsing all divs with a single click using Jquery

I've gone through numerous resources but I'm still struggling to understand this concept. I have implemented a simple accordion based on this tutorial and now I want to include an "expand/collapse all" link. While I was able to expand all the ite ...

Resizing popups upon button activation

Hey there! I have a popup with a button that reveals random text containing between 0 to 32 words when clicked. The issue is, the popup keeps resizing based on the length of the text, causing the button to move around. Is there a way I can keep the button ...

Creating a seamless and interactive online platform

I am in the process of designing a website that has a sleek and dynamic layout, rather than just a static homepage. Let me explain further: Here is my current setup so you can understand what I am trying to achieve. By dynamic, I mean that when the page ...

Several buttons sharing the same class name, however, only the first one is functional

As a newcomer to JavaScript, I am currently working on the front-end of a basic ecommerce page for a personal project. My query pertains to the uniformity of all items being displayed on the page, except for their names. When I click on the "buy" button f ...

Executing a mouse click on a dynamic button using Selenium IDE

I am facing an issue where the button I need to click on my website has a changing ID suffix every time I visit the site. To tackle this problem, I have saved the suffix in a variable and attempted to combine it with the prefix so that I can click the butt ...

What is the proper way to add multiple divs using jquery?

Is there a way to simplify this lengthy HTML code used for browser alerts? Here is an example: <div class="ie-message" style="display: block; "> <div class="alert error"> <h2> Sorry, your web-browser is outdated ...

Transmit information to a different JavaScript framework using Vue

Utilizing Vue, I create a JSON file using classic ASP from SQL Server and import the data. My objective is to showcase the received data on the page and in ApexCharts. The structure of the HTML page, getData.js, and the JSON from dataSql.asp is outlined b ...

What are some possible causes for an iframe failing to load?

When it comes to iframes failing to load their content, there could be various reasons causing this issue. I recently encountered a situation where an iframe on my site's "thank you" page was not displaying any content when inspected using Chrome dev ...

Manage the information retrieved from a JSON autocomplete query response

I'm receiving the following response from my jquery autocomplete plugin: {"data":{ "events":{"id":"96","value":"Nr 1 Offline","abbrev":"image.jpg"}, "users&q ...

Utilizing Images with 'General Drawing' in Highcharts

I'm currently attempting to create a task diagram using Highcharts. I had the idea of incorporating images using the <img> tag ren.label('<img src="/images/test.jepg', 10, 82) .attr({ ...

Fade in and fade out elements with jQuery using opacity in Internet Explorer

I have encountered an unusual issue in Internet Explorer involving a CSS Overlay used for a lightbox. The problem arises when I apply the fadein and fadeout effects using jQuery - everything seems to work smoothly except in IE. Instead of displaying a smo ...

In what time frame is Javascript/AJAX functioning?

Do you know if the times are measured in milliseconds or seconds? I'm puzzled why these two scripts aren't synchronizing - there's a significant delay. $(document).ready(function() { $("#idle").delay(300000).fadeIn(500); }); var interv ...

What is the best way to place multiple images on top of one another within a single div, and make them break apart with animation upon hovering?

HTML: <div class="mySlides"> <img src="1.jpg"> <img src="2.jpg"/> <img src="3.jpg"/> <img src="4.jpg"/> <img src="5.jpg"/> </div> CSS: .mySlides { padding-top: 25%; padding-left: 5%; ...

Tips for utilizing SeleniumRC within JUnit framework for elements with dynamically changing IDs

I'm currently in the process of automating a workflow and I need to click on a link within a table row. The challenge is that all links within the rows share the same element ID, and the source code has a JavaScript code snippet like this: ("Element I ...

Modify Knockout applyBindings to interpret select choices as numeric values

Utilizing Knockout alongside html select / option (check out Fiddle): <select data-bind="value: Width"> <option>10</option> <option>100</option> </select> Upon invoking applyBindings, the options are interprete ...

Using Javascript to select a radio button in a form depending on the value entered in a text box

I have a form that interacts with a Google Sheet to insert and retrieve data. For instance, the form contains two radio buttons: <input id="Rdio_1" name="RdioSelect" type="radio" class="FirstCheck" value="1" onchange="RadioValInsert ()"/> < ...

Issue with MUI data grid not resizing properly within a grid container: The dimensions of the MUI data grid are not adjusting as anticipated

In my setup, I have a main grid <div> container that contains two child elements. One is the MUI <DataGrid />, and the other is a simple <div>: Here's how it looks in JSX (React): <div className="container"> <Da ...

Unexpected response from ajax request

I am struggling to properly handle error messages in my jQuery ajax code. When the fetch array result from my ajax page contains data, I want to display an error message; however, when the array result is empty, I want nothing to happen. Unfortunately, my ...