@alpeshabitat/quick-filter
v1.2.0
Published
Filtrer facilement des données dans une liste d'éléments HTML
Downloads
24
Readme
QuickFilter
Micro librairie permettant d'implémenter une recherche javascript facilement.
Utilisation de QuickFilter
⚠️ Attention ⚠️ Cette librairie ne fonctionne qu'avec une seule recherche par page
Installation
L'utilisation de la librairie se veux le plus simple possible. Installez la avec
npm install @alpeshabitat/quick-filter
Utilisation
Importez la librairie dans votre fichier JavaScript
import quickFilter from '@alpeshabitat/quick-filter'
Il faut ensuite l'activer
quickFilter()
On peut également passer un objet de configuration pour modifier certains paramètres si besoin. Voici les valeurs par défaut et leur utilité.
quickFilter({
containerDisplay: 'block', // QuickFilter passe les éléments en display none pour les masquer. On précise ici la valeur de display à remettre lors du ré-affichage des éléments. Plus d'informations ci-dessous
searchInput: '#qf-filter-input', // L'input sur lequel on effectue la recherche
dataAttribute: 'data-qf-filter-value' // l'attribut a placer sur les éléments a filtrer
})
On peut alors l'utiliser en ajoutant tout d'abord l'id qf-filter-input
sur l'input de recherche
<input id="qf-filter-input" type="text" placeholder="🔎 Recherche">
Ainsi que l'attribut data-qf-filter-value
sur les éléments à trier. Par exemple:
<div class="monContainer" data-qf-filter-value="maValeur">maValeur</div>
<div class="monContainer" data-qf-filter-value="monAutreValeur">monAutreValeur</div>
⚠️ Cas particuliers ⚠️
Il est possible que les espaces ne soient pas conservés dans l'attribut data-qf-filter-value. Pour éviter cela on peut utiliser le filtre url_encode de twig dans le cas d'une utilisation avec Symfony.
<div data-qf-filter-value="{{ maValeur|url_encode }}">{{ maValeur }}</div>
Si besoin particuliers, il est possible de définir la valeur css de display des conteneurs directement sur l'input de recherche avec l'attribut data-qf-display
. Si défini, cet attribut prévaudra la valeur passée en paramètre lors de l'appel de la fonction quickFilter()
.
<div data-qf-display="flex" id="qf-filter-input"></div>
Et c'est tout!
👾 Environnement de développement
🏁 Pré-requis
🤝 Contribuer au projet
Faire un
npm install
Il est possible de tester facilement le paquet en l'installant dans un autre projet avec la commande
npm install /chemin/complet/vers/le/dossier/de/quickFilter
Les changements s'appliqueront en temps réel
📃 Règles de codage
- Le projet utilise une configuration prettier disponible dans le fichier prettierrc, il faut donc installer l'extension Prettier sur VsCode
- Indentation = 4 espaces
🔍 Merge Request
Les "Merges Requests" sont les bienvenues.
Pour les changements majeurs, veuillez en discuter avec le reste de l'équipe.
Merci de ne jamais travailler directement dans la branche main.
🏛 Code de Conduite
Dans l'intérêt de favoriser un environnement ouvert et accueillant, nous nous engageons à faire de la participation à ce projet une expérience exempte de harcèlement pour tout le monde, quel que soit le niveau d'expérience, le sexe, l'identité ou l'expression de genre, l'orientation sexuelle, le handicap, l'apparence personnelle, la taille physique, l'origine ethnique, l'âge, la religion ou la nationalité.