Tips on finding elements within a UL LI tree view using CSS

When rendering a tree using UL LI, parents are not selectable but children are selectable by clicking on the checkbox. By default, the tree view is not expanded. I am attempting to implement a search feature where users can type a search criteria that is case-insensitive and the tree will expand to show matching results highlighted.

Although I have a JS function in place, it does not seem to return matching results or highlight them. Any suggestions would be highly appreciated.

HTML

  <div id="errorCodes">

    <ul class="treeview">
        <li class="collapsable">
            <div class="hitarea collapsable-hitarea"></div>

            Pipettor Aspiration Dispense

            <ul class="treeview" style="display: block;">
                <li>
                    <input id="error150011" type="checkbox" value="150011"></input>

                    Unknown Error

                </li>
                <li class="expandable"></li>

JS Function

$("#search_tree").click(function () {

    $("#errorCodes li").removeclass("collapsible").find("input").removeClass("highlighted");
    //Search again
    $("#errorCodes li input:Contains(" + $('#plugins4_q').val() + ")")
  .addClass("highlighted").parents("li").addClass("collapsible");

});
javascriptjquerycss

Answer №1

If you're looking to search the text near the inputs instead of the input values themselves, I've enclosed each input within a label and instructed the script to search within that. While there is some trial and error involved in this solution, the code snippet below might prove helpful:

$("#search_tree").click(function () {
    // Close and remove highlighting from everything
        $(".opened, .highlighted").removeClass("opened highlighted");
    // Perform search
        var term = $('#plugins4_q').val().toLowerCase();
        // For case-insensitive searches, a filter is needed:
            $('#errorCodes li label').filter(function(){
                return $(this).text().toLowerCase().indexOf(term) > -1;
            })
        // Highlight matches
            .addClass("highlighted")
        // Expand all ancestors
            .parents("li").addClass("opened");
});

Check out this working example on jsFiddle.

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

Discover classes dynamically and eliminate redundant div elements

I am facing an issue with a JSON request that dynamically generates search results within div elements. The search results contain duplicate classes, all starting with "lid". How can I programmatically identify and remove all but one of the duplicate class ...

javascriptjquery

Autocompleter Component: Blur input when clicking on content

Currently, I am facing an issue while using MUI's Autocomplete on mobile. The problem arises when the dropdown list is open and I attempt to interact with an element within that list, such as a button. Upon clicking on this interaction element, the in ...

javascriptreactjsmaterial-ui

Can the website color scheme be adjusted according to the specific platform?

After dedicating hours to web coding, I finally launched my very first website. The design was created on my trusty MacBook Pro Retina 13 inch, which boasts bright and crisp colors on its screen. However, when viewed on other devices such as Windows PCs, t ...

csscolors

How to customize the background-color of buttons in React JS using className in react-bootstrap PopOver

I am currently working on a React JS component that includes multiple buttons, each of which triggers a different popover or tooltip message. I am trying to assign unique background colors to each popover title. I have added the styling for these colors in ...

cssreactjstwitter-bootstrap

What could be causing the failure of loading CSS images or JS in my Laravel project?

This is a continuation of my previous question where I managed to get the site up and running. Initially, all files including css, js, and images were loading properly. However, now I am encountering issues as the files are not loading and the console disp ...

javascriptphpcsslaravelimage

Passing an array from JavaScript to PHP using the $.post method

I am facing a challenge with my javascript array and ajax call setup. Here is the current situation: arr = [1, "string", 3] Below is my ajax call: $.post("./ajax_book_client.php", {'client_info[]': arr}, function(data) { ...

javascriptphpjqueryajax

Can encryption be implemented with a salt for added security instead of hashing?

I have been utilizing Node.js native crypto methods such as createCipherIv to encrypt objects. const algorithm = "aes256"; const inputEncoding = "utf8"; const outputEncoding = "hex"; const iv = randomBytes(16); export async f ...

javascriptnode.jsencryptioncryptographysalt-cryptography

All elements of the Jquery Accordian are receiving identical data appends

This is a program showcasing an accordion feature. The accordion is being created with sample data. When the accordion element is clicked, the click event is captured, then an XML file is loaded and the data is appended to the div. However, the issue ari ...

jquery

Create and transmit an array of JSON objects

I need help with defining and sending a JSON object array. While I've managed to define a single JSON object, convert it into a string, and send it, I'm stuck on how to do the same for an array of objects. It seems like there might be a simple so ...

asp.netjavascriptjson

Align elements vertically in flexbox container using Bootstrap 3 on Internet Explorer 10 and 11

Encountering a problem in IE10+11 when trying to vertically center two Bootstrap columns within a row using flexbox. The dynamic content in the columns requires the row to have a minimum height of 65px. However, if the content expands and spans multiple l ...

htmlcsstwitter-bootstrapflexbox

Should I use Mongoose schema methods or prototype functions?

I am curious about the functionality of functions and ES6 classes in relation to new objects created from a mongoose schema. I wonder if the functions are duplicated for each new object and what the best approach is when utilizing ES6 classes. To illustrat ...

javascriptnode.jsmongoose-schema

The bootstrap-table datepicker seems to have a quirk where any date entered is mysteriously erased

I have a Bootstrap table column displaying dates and I've added a filter to it. There are two ways to input the date - either by selecting from a calendar or manually entering it in string format. The issue arises when manually entering the date as t ...

javascriptjquerybootstrap-4bootstrap-table

What is the best way to create a navbar with a grid that spans the full height and includes two rows

My approach to structuring the layout using CSS grid is as follows: nav content nav footer This means that the 'nav' will occupy the entire height of the page with a specified width, and the remaining space will be divided between the 'cont ...

csssasscss-grid

Sharing AngularJs controllers between different modules can help streamline your

I'm facing an issue with trying to access an array from one controller in another controller. Despite simplifying the code for clarity, I still can't seem to make it work. Here is my first controller: app.controller('mycont1', [' ...

javascriptangularjsmodel-view-controller

Monitoring transactions through interactive buttons that lead to external destinations

Tracking purchases on my website using a dynamic button that redirects to other sites is essential. See the code snippet below: <div class="buyproduct"> <a onclick="target='_blank'" href="<?php echo $this->product['from&apos ...

phpjavascripturlhttp-redirectoutbound

Refreshing forms in Angular 2

I am attempting to retrieve values from forms using the submit event. However, I am encountering difficulty resetting those forms later on. I am using an id called "myForm" and an onclick function to try and achieve this. <form (Submit)="addMarker()" i ...

javascripthtmlcssangularjs

Unable to transmit the error information to a response

Currently, I am in the process of making a POST request with a form-data type body. Within the body, there is specific data that can be found here: https://i.sstatic.net/XvRgJ.png In order to parse the data field (which is stringified JSON) in the body ...

javascriptnode.jsexpress

The popup image on my main project is not functioning correctly, despite working perfectly in my test project

I am working on creating a pop-up image for my internship project. When the user clicks on an image, I want it to display in a larger size with a background and opacity. However, the code I have implemented so far is not functioning properly. Please ignore ...

javascripthtmlcssimagepopup

Guide to merging two JSON objects

I have two JavaScript objects as shown below: const objOne = { "firstname": "xzxz", "lastname": "xzxzxzx" }; const objTwo = { "title": [ { "name": "foo", "ta ...

javascriptarraysjson

What causes the inconsistency in width distribution among flex children when the flex grow property is set to 1 alongside text content?

Why do the elements one, two, and damn not take up equal space, as they all have flex: 1? I want them to have equal widths based on the parent's width. How can I adjust it so that the element with class damn takes up less space than the other two? .w ...

htmlcss