JSFiddle - React, Tailwind, and code Playground

by M33D

HTML

<input type="text" id="iptFlt" />
<div id="ctnFlt" class="list">
    <div class="group">
        <div class="group-title">Quatre roues</div>
        <div class="group-items">
            <label>
                <input type="checkbox" />
                <span class="item-search">Auto</span>
            </label>
            <label>
                <input type="checkbox" />
                <span class="item-search">Camion</span>
            </label>
        </div>
    </div>
    <div class="group">
        <div class="group-title">Deux roues</div>
        <div class="group-items">
            <label>
                <input type="checkbox" />
                <span class="item-search">Moto</span>
            </label>
            <label>
                <input type="checkbox" />
                <span class="item-search">Velo</span>
            </label>
        </div>
    </div>
    <div class="group">
        <div class="group-title">Autre</div>
        <div class="group-items">
            <label>
                <input type="checkbox" />
                <span class="item-search">Avion</span>
            </label>
        </div>
    </div>
    <div class="empty-item">Aucun résultat</div>
</div>

CSS

* {
    box-sizing: border-box;
}

#iptFlt {
    width: 200px;
}

#ctnFlt {
    border: 1px solid #ccc;
    width: 200px;
    margin-top: 5px;
    background-color: #fff;
}

.group:nth-child(2n) {
    background-color: #eee;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.group-title {
    padding: 2px;
    font-weight: bold;
    font-style: italic;
}

label {
    display: block;
    padding: 2px;
}

label:hover {
    cursor: pointer;
    background-color: #ddd;
}

.empty-item {
    font-style: italic;
    color: #ddd;
}

JavaScript

function SearchList(ipt, ctn) {
    this.input = document.getElementById(ipt);
    this.contener = document.getElementById(ctn);

    this.search = this.input.value;
    this.finds = [];
    this.groups = [];
    this.items = [];
    this.empty = null;

    this.init();
}

SearchList.prototype = {
    constructor: SearchList,

    // init. l'objet
    init: function() {
        var self = this;
        this.empty = this.contener.getElementsByClassName('empty-item')[0];
        this.contener.removeChild(this.empty);
        this.input.addEventListener('input', function() {
            self.search = this.value;
            self.update();
        }, false);
        this.makeData().update();
    },

    // nettoye le texte donnée
    cleanText: function(txt) {
        return txt.toString().toLowerCase().trim();
    },

    // créer les valeurs recherché
    makeData: function() {
        var grps = [],
            i = 0,
            len, idx_g, grp, itm, data;

		Array.prototype.push.apply(grps, this.contener.getElementsByClassName('group'));
		len = grps.length;
        
        for (; i < len; i++) {
            idx_g = this.addGroup(grps[i]);
            grp = this.groups[idx_g];
            
            	
            while (html = grp.contener.firstElementChild) {
                data = html.getElementsByClassName('item-search')[0].textContent;
                grp.items.push(this.addItem(html, data, idx_g));
            }
        }
        return this;
    },

    // ajoute un résultat
    addItem: function(html, data, grp) {
        return this.items.push({
            html: html.parentElement.removeChild(html),
            data: this.cleanText(data),
            group: grp
        }) - 1;
    },

    // ajoute un group
    addGroup: function(html) {
        return this.groups.push({
            html: html.parentElement.removeChild(html),
            contener: html.getElementsByClassName('group-items')[0],
            items: []
        }) - 1;
    },

    // MAJ...