JSFiddle - React, Tailwind, and code Playground
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: function() {
var self = this;
//this.empty = this.contener.getElementsByClassName('empty-item')[0];
this.empty = this.contener.querySelectorAll('.empty-item')[0];
this.contener.removeChild(this.empty);
//this.input.addEventListener('input', function() {
//self.search = this.value;
//self.update();
//}, false);
if(this.input.addEventListener) {
this.input.addEventListener('input', function() {
self.search = this.value;
self.update();
}, false);
} else {
this.input.attachEvent("propertychange input", function() {
self.search = this.value;
self.update();
})
};
this.makeData().update();
},
cleanText: function(txt) {
if (!String.prototype.trim) {
String.prototype.trim = function () {
return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
};
}
return txt.toString().toLowerCase().trim();
},
makeData: function() {
var grps = [],
i = 0,
len, idx_g, grp, itm, data;
//Array.prototype.push.apply(grps, this.contener.getElementsByClassName('categorieAptitudes'));
Array.prototype.push.apply(grps, this.contener.querySelectorAll('.categorieAptitudes'));
len = grps.length;
for (; i < len; i++) {
idx_g = this.addGroup(grps[i]);
grp = this.groups[idx_g];
// while (html = grp.contener.firstElementChild) {
console.log("grp.contener: " +...