JSFiddle - React, Tailwind, and code Playground

by M33D

HTML

<input type="text" id="filtreAptitudes">
<div id="conteneurAptitudes">
  <div class="group">
    <div class="nomCategorie"> Réinsertion - suivi</div>
    <div class="categorieAptitudes" id="Réinsertion - suivi">
      <label>
      <input type="checkbox" value="1251"><span class="item-search">Appartement pour mise en situation d'autonomie</span>
      </label>
      <label>
      <input type="checkbox" value="1282"><span class="item-search">Education du patient et de son entourage à domicile</span>
      </label>
      <label>
      <input type="checkbox" value="1293"><span class="item-search">Equipe mobile, suivi à domicile</span>
      </label>
      <label>
      <input type="checkbox" value="1309"><span class="item-search">Insertion professionnelle</span>
      </label>
      <label>
      <input type="checkbox" value="1395"><span class="item-search">Structure d'orientation professionnelle</span>
      </label>
    </div>
  </div>
  <div class="group">
    <div class="nomCategorie"> Conventions ou accords de fonctionnement</div>
    <div class="categorieAptitudes" id="Conventions ou accords de fonctionnement">
      <label>
      <input type="checkbox" value="1271">  <span class="item-search">Convention avec une unité</span>
      </label>
      <label>
      <input type="checkbox" value="1272"><span class="item-search">Convention d'accès à un service de réanimation</span>
      </label>
      <label>
      <input type="checkbox" value="1273"><span class="item-search">Convention d'accès à une USC de cardiologie</span>
      </label>
      <label>
      <input type="checkbox" value="1310"><span class="item-search">Intégration à un réseau de Soins Palliatifs</span>
      </label>
    </div>
  </div>
  <div class="empty-item">Aucun résultat</div>
</div>

CSS

label {
	display: block;
    padding-left:2px;
    5px;
}

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('categorieAptitudes')[0],
            items: []
        }) - 1;
    },

   ...