JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div class="postbox " id="customcategorydiv">
    <div title="Click to toggle" class="handlediv"><br></div><h3 class="hndle"><span>Categories</span></h3>
    <div class="inside">
        <div class="categorydiv" id="taxonomy-category">
            Search: <input type="text" value="" id="catSearch">
            
            <div style="display: none;" class="tabs-panel" id="category-pop">
                <ul class="categorychecklist form-no-clear" id="categorychecklist-pop">
                    
                    <li class="popular-category" id="popular-category-57">
                        <label class="selectit">
                            <input type="checkbox" value="57" id="in-popular-category-57">
                            Sports            </label>
                    </li>
                    
                    
                    <li class="popular-category" id="popular-category-24">
                        <label class="selectit">
                            <input type="checkbox" value="24" id="in-popular-category-24">
                            Animals            </label>
                    </li>
                    
                    
                    <li class="popular-category" id="popular-category-39">
                        <label class="selectit">
                            <input type="checkbox" value="39" id="in-popular-category-39">
                            Society            </label>
                    </li>
                    
                    
                    <li class="popular-category" id="popular-category-1">
                        <label class="selectit">
                            <input type="checkbox" value="1" id="in-popular-category-1">
                            Uncategorized            </label>
                    </li>
                    
                    
                    <li class="popular-category" id="popular-category-21">
                        <label class="selectit">
               ...

CSS

ul {margin-left: 10px;}

JavaScript

jQuery(document).ready(function() {
    jQuery('#catSearch').keyup(function() {
        var val = jQuery('#catSearch').val(),
            lis = jQuery("#categorychecklist li");
        lis.hide();
        // find li's containing term
        lis.filter(":contains('" + val + "')")
            // and children lis, and ourselves, then show
            .find('li').andSelf().show();
    });
});