Recherche au changement — exercice corrigé de Vue : construire une application web (école d'ingénieur) (chapitre 4)

Recherche au changement

Formulaires · niveau 2

Énoncé

Un champ de recherche filtre le catalogue de la Librairie sur le titre, l'auteur et le rayon, sans tenir compte des accents ni des majuscules (« litterature » trouve « Littérature »). La recherche n'est lancée que quand le visiteur appuie sur Entrée ou quitte le champ. Écrire l'application ; quel modificateur suffit ?

Corrigé


<div id="app">
  <div>
    <p><label>Recherche <input v-model.trim.lazy="recherche" type="search"></label></p>
    <p aria-live="polite">{{ trouves.length }} titre(s) pour « {{ recherche }} »</p>
    <ul><li v-for="l in trouves" :key="l.isbn">{{ l.titre }}</li></ul>
  </div>
</div>


const { createApp, ref, computed } = Vue;

function normaliser(texte) {
  return texte.toLowerCase().normalize("NFD").replace(/\p{Diacritic}/gu, "");
}

createApp({
  setup() {
    const recherche = ref("");
    const trouves = computed(() => LIVRES.filter((l) =>
      normaliser(`${l.titre} ${l.auteur} ${l.rayon}`).includes(normaliser(recherche.value))));
    return { recherche, trouves };
  },
}).mount("#app");

Après avoir tapé « litterature », sans valider, puis après Entrée :


6 titre(s) pour « »
Recherche 
2 titre(s) pour « litterature »
Le Petit Prince
L’Étranger

.lazy suffit : la donnée, donc la propriété calculée, ne change qu'à l'événement change. La normalisation décompose les lettres accentuées (NFD) puis retire les accents.