Recherche filtrée en page avec Javascript Vanilla

Améliorez l'expérience utilisateur sur les pages riches en informations avec une fonction de recherche simple en page. Oubliez les requêtes de base de données ou l'analyse JSON - cette méthode recherche directement le contenu texte rendu d'une page Web. Bien qu'il existe une recherche intégrée de navigateur, cette approche offre une expérience de filtrage raffinée, mettant en évidence les résultats pertinents pour une navigation plus facile.

Voici une démo en direct présentant la fonctionnalité: [lien vers la démo]

J'utilise cette technique dans un projet du monde réel: https://www.php.cn/link/2a60eed05079970d61abad679da7ae8f .

Tirer parti de JavaScript

Ce tutoriel utilise JavaScript pour gérer tous les éléments interactifs. Plus précisément, ce sera:

1. Identifier le contenu consultable.
2. Survenez l'entrée de l'utilisateur dans le champ de recherche.
3. Filtrez le innerText des éléments consultables.
4. Vérifiez si le texte inclut le terme de recherche ( .includes() est essentiel ici).
5. Basculer la visibilité de l'élément basé sur les correspondances de termes de recherche.

Structure HTML de base

Supposons une page FAQ où chaque question est présentée comme une "carte" avec un titre et un contenu:

<h1 id="Section-FAQ"> Section FAQ</h1>

<div>
  <h3 id="Qui-sommes-nous">Qui sommes-nous</h3>
  <p>Il a survécu non seulement à cinq siècles, mais aussi au saut dans la composition électronique, restant essentiellement inchangé. Il a été popularisé</p>
</div>

<div>
  <h3 id="Ce-que-nous-faisons">Ce que nous faisons</h3>
  <p>Il a survécu non seulement à cinq siècles, mais aussi au saut dans la composition électronique, restant essentiellement inchangé. Il a été popularisé</p>
</div>

<div>
  <h3 id="Pourquoi-travailler-ici">Pourquoi travailler ici</h3>
  <p>Il a survécu non seulement à cinq siècles, mais aussi au saut dans la composition électronique, restant essentiellement inchangé. Il a été popularisé</p>
</div>

<div>
  <h3 id="Apprendre-encore-plus">Apprendre encore plus</h3>
  <p>Vous voulez en savoir plus sur nous?</p>
</div>

Pour une page avec de nombreuses questions, cette structure évolue efficacement.

Pour permettre l'interactivité, nous utiliserons une seule règle CSS:

 .is-hidden {affichage: aucun; }

Cette classe sera ajoutée ou supprimée dynamiquement pour contrôler la visibilité des éléments. Nous ajouterons également une entrée de recherche:

 <label for="searchbox">Recherche:</label>
<input type="text" id="searchbox">

Fonctionnalité de base JavaScript

Le code JavaScript suivant gère la fonctionnalité de recherche:

 fonction lifesearch () {
  Laissez les cartes = document.QuerySelectorAll ('. Cards'); // sélectionner les éléments de la carte
  Laissez SearchQuery = document.getElementById ("SearchBox"). Valeur; // Obtenez le terme de recherche

  cartes.ForEach (card => {
    Soit textContent = card.innerText.tolowerCase (); // normaliser en minuscules
    Laissez SearchTermLower = SearchQuery.tolowerCase (); // normaliser en minuscules

    if (textContent. y compris (SearchterLlower)) {
      card.classlist.remove ('is-hidden'); // Afficher les cartes de correspondance
    } autre {
      card.classList.add ('is-hidden'); // masquer les cartes non correspondantes
    }
  });
}

// ajoute un petit retard pour éviter les appels de fonction excessifs
Laissez Typingtimer;
Soit typeInterval = 500; // une demi-seconde
Laissez SearchInput = document.getElementById ('SearchBox');

searchInput.adDeventListener ('keyup', () => {
  ClearTimeout (typingtimer);
  TypingTimer = setTimeout (lifesearch, typeInterval);
});

Le code itère via les cartes, vérifie l'inclusion des termes de recherche (insensible au cas) et met à jour la visibilité en conséquence. Un retard empêche les problèmes de performance des frappes rapides.

Expansion des capacités de recherche: correspondance floue

Pour intégrer la correspondance floue (recherche de mots clés connexes, même s'il n'est pas affiché explicitement), envisagez d'utiliser des éléments ou des attributs cachés:

Méthode 1: Éléments cachés

Ajouter des éléments cachés contenant des mots clés:

<div>
  <h3 id="Qui-sommes-nous">Qui sommes-nous</h3>
  <p>...</p>
  <span class="hidden-keywords">secret, compagnie, histoire</span>
</div>

Modifiez liveSearch pour inclure textContent au lieu de innerText pour accéder aux mots clés cachés.

Méthode 2: Attributs

Utilisez des attributs comme alt pour les images:

<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174227042512545.jpg" class="lazy" alt="Recherche filtrée en page avec Javascript Vanilla">

Ajustez liveSearch pour utiliser getAttribute('alt') pour rechercher des valeurs d'attribut.

Note importante

Cette méthode de recherche est limitée au contenu déjà rendu dans le DOM. Il ne convient pas à la recherche de bases de données externes ou de grands ensembles de données.

Conclusion

Cette solution de recherche en page simple mais efficace, implémentée avec Vanilla JavaScript, peut considérablement améliorer la convivialité des pages Web avec un contenu étendu. Adapter et développer cette technique en fonction de diverses applications, des pages FAQ aux galeries d'images.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!