Recherche de données sur une page html
Cette fonction permet de filtrer et d'afficher en surbrillance des données dans le code html
Code JQuery
function filter(element, filtre) {
var value = $(element).val();
var $li = $(filtre).find('.nom');
$li.closest(filtre).hide();
$li.each(function () {
var text = $(this).text();
var textL = text.toLowerCase();
var position = textL.indexOf(value.toLowerCase());
if (position !== -1) {
var regex = new RegExp(value, 'ig');
text = text.replace(regex, (match, $1) => {
return '<span class="searchhight">' + match + '</span>';
});
$(this).closest(filtre).show();
}
$(this).html(text);
});
}
CSS
.searchhight {
background-color: #f7f700;
color: #465963;
border-radius: 3px;
font-weight: 700;
}
Code HTML
<input class="" onkeyup="filter(this, '.parent')" placeholder="Rechercher un client" type="text">
<div class="parent">
<div class='nom'>Texte 1</div>
<div class='nom'>blabla</div>
</div>
