Construire votre propre barre de recherche à saisie semi-automatique est plus facile que vous ne le pensez.
Une barre de recherche est un élément d'interface utilisateur populaire utilisé par de nombreux sites Web modernes. Si vous créez un site contenant n'importe quel type de données, vous souhaiterez peut-être que vos utilisateurs puissent rechercher des éléments spécifiques.
Il existe de nombreuses façons de créer une barre de recherche. Vous pouvez créer des barres de recherche complexes qui renvoient des résultats basés sur plusieurs filtres, tels qu'un nom ou une date. Les bibliothèques existantes peuvent vous aider à implémenter une barre de recherche sans la créer à partir de zéro.
Cependant, vous pouvez également créer une barre de recherche simple à l'aide de JavaScript vanille, qui compare l'entrée d'un utilisateur à une liste de chaînes.
Comment ajouter l'interface utilisateur pour la barre de recherche
Votre site Web doit inclure une zone de saisie permettant à vos utilisateurs de saisir le texte qu'ils souhaitent rechercher. Une façon de le faire est d'utiliser une balise d'entrée et de la styliser pour qu'elle ressemble à une barre de recherche.
- Créez un dossier pour stocker votre site Web. Dans le dossier, créez un fichier HTML nommé index.html.
- Remplissez votre fichier avec la structure de base d'un document HTML. Si vous n'êtes pas familier avec HTML, il existe de nombreux Exemples de code HTML que vous pouvez apprendre pour vous aider à prendre de la vitesse.
<!doctype html>
<html lang="fr-US">
<diriger>
<titre>Barre de recherche</title>
</head>
<corps>
<classe div="récipient">
<!-- Le contenu de la page Web va ici-->
</div>
</body>
</html> - À l'intérieur de la classe de conteneur div, ajoutez une balise d'entrée. Cela permettra à l'utilisateur de saisir le texte qu'il souhaite rechercher. Chaque fois qu'ils saisiront un nouveau caractère, votre site Web appellera la fonction search(). Vous créerez cette fonction dans les étapes ultérieures.
L'attribut de saisie semi-automatique garantit qu'un navigateur n'ajoutera pas sa propre liste déroulante en fonction des termes de recherche précédents.<classe div="récipient">
<h2>Rechercher des pays</h2>
<identifiant d'entrée ="barre de recherche" saisie semi-automatique="désactivé" onkeyup="recherche()" taper="texte"
nom="recherche" espace réservé="Qu'est-ce que tu cherches?">
</div> - Dans le même dossier que votre index.html fichier, créez un nouveau fichier CSS appelé styles.css.
- Remplissez le fichier avec un style pour la page Web globale et la barre de recherche :
corps {
marge: 0 ;
rembourrage: 0 ;
Couleur de l'arrière plan: #f7f7f7 ;
}
* {
famille de polices: "Arial", sans empattement ;
}
.récipient {
rembourrage: 100px 25% ;
affichage: flexible ;
flex-direction: colonne ;
hauteur de ligne: 2 rem ;
taille de police: 1.2em;
couleur: #202C39 ;
}
#barre de recherche {
rembourrage: 15px ;
rayon de bordure: 5 px ;
}
saisir[type=texte] {
-webkit-transition: largeur 0.15sfacilité d'entrée;
transition: largeur 0.15sfacilité d'entrée;
} - Dans index.html, ajoutez un lien vers votre fichier CSS dans la balise head et sous la balise title :
<lien rel="feuille de style" href="styles.css"> - Ouvrez le index.html fichier dans un navigateur Web et affichez l'interface utilisateur de votre barre de recherche.
Comment créer les chaînes de liste pour la barre de recherche
Avant que l'utilisateur puisse effectuer une recherche, vous devez créer une liste d'éléments disponibles qu'il peut rechercher. Vous pouvez le faire avec un tableau de chaînes. Une chaîne est l'une des nombreuses types de données que vous pouvez utiliser en JavaScript, et peut représenter une séquence de caractères.
Vous pouvez créer dynamiquement cette liste en utilisant JavaScript, pendant le chargement de la page.
- À l'intérieur index.html, sous la balise d'entrée, ajoutez un div. Cette div affichera une liste déroulante qui contiendra une liste d'éléments correspondant à ce que l'utilisateur recherche :
<id div="liste"></div> - Dans le même dossier que votre index.html fichier et styles.css fichier, créez un nouveau fichier appelé script.js.
- À l'intérieur script.js, créez une nouvelle fonction appelée loadSearchData(). Dans la fonction, initialisez un tableau avec une liste de chaînes. Gardez à l'esprit qu'il s'agit d'une petite liste statique. Une implémentation plus complexe devra prendre en compte la recherche dans des ensembles de données plus importants.
fonctionloadSearchData() {
// Données à utiliser dans la barre de recherche
laisser pays = [
'Australie',
'L'Autriche',
'Brésil',
'Canada',
'Danemark',
'Egypte',
'France',
'Allemagne',
'Etats-Unis',
'Viêt Nam'
];
} - Dans loadSearchData() et sous le nouveau tableau, obtenez l'élément div qui affichera les éléments de recherche correspondants à l'utilisateur. À l'intérieur de la div de la liste, ajoutez une balise d'ancrage pour chaque élément de données de la liste :
// Récupère l'élément HTML de la liste
laisser liste = document.getElementById('liste');
// Ajoute chaque élément de données en tant que étiqueter
des pays.pour chaque((pays)=>{
laisser un = document.createElement("un");
a.innerText = pays ;
a.classList.add("élément de liste");
liste.appendChild (a);
}) - Dans la balise body de index.html, ajoutez l'attribut d'événement onload pour appeler la nouvelle fonction loadSearchData(). Cela chargera les données pendant le chargement de la page.
<chargement du corps ="chargerRechercheDonnées()"> - Dans index.html, avant la fin de la balise body, ajoutez une balise de script pour créer un lien vers votre fichier JavaScript :
<chargement du corps ="chargerRechercheDonnées()">
<!-- Le contenu de votre page Web -->
<script src="script.js"></script>
</body> - Dans styles.css, ajoutez un style à la liste déroulante :
#liste {
bordure: 1px gris clair solide ;
rayon de bordure: 5 px ;
bloc de visualisation;
}
.listItem {
affichage: flexible ;
flex-direction: colonne ;
décoration de texte: aucune ;
rembourrage: 5px 20px ;
la couleur noire;
}
.listItem:flotter {
couleur de fond: gris clair ;
} - Ouvrir index.html dans un navigateur Web pour afficher votre barre de recherche et la liste des résultats de recherche disponibles. La fonctionnalité de recherche ne fonctionne pas encore, mais vous devriez voir l'interface utilisateur qu'elle utilisera :
Comment créer la liste déroulante avec des résultats correspondants dans la barre de recherche
Maintenant que vous disposez d'une barre de recherche et d'une liste de chaînes que les utilisateurs peuvent rechercher, vous pouvez ajouter la fonctionnalité de recherche. Au fur et à mesure que l'utilisateur tape dans la barre de recherche, seuls certains éléments de la liste s'affichent.
- Dans styles.css, remplacez le style de la liste pour masquer la liste par défaut :
#liste {
bordure: 1px gris clair solide ;
rayon de bordure: 5 px ;
affichage: aucun ;
} - Dans script.js, créez une nouvelle fonction appelée search(). Gardez à l'esprit que le programme appellera cette fonction chaque fois que l'utilisateur saisira ou supprimera un caractère de la barre de recherche. Certaines applications auront besoin de se rendre sur un serveur pour récupérer des informations. Dans de tels cas, cette implémentation pourrait ralentir votre interface utilisateur. Vous devrez peut-être modifier l'implémentation pour en tenir compte.
fonctionrecherche() {
// la fonctionnalité de recherche va ici
} - Dans la fonction search(), récupérez l'élément HTML div pour la liste. Obtenez également les éléments de balise d'ancrage HTML de chaque élément de la liste :
laisser listeContainer = document.getElementById('liste');
laisser listeItems = document.getElementsByClassName('listItem'); - Obtenez l'entrée que l'utilisateur a saisie dans la barre de recherche :
laisser entrée = document.getElementById('barre de recherche').value
entrée = entrée.toLowerCase(); - Comparez l'entrée de l'utilisateur à chaque élément de la liste. Par exemple, si l'utilisateur saisit "a", la fonction comparera si "a" est à l'intérieur de "Australie", puis "Autriche", "Brésil", "Canada", etc. S'il correspond, il affichera cet élément dans la liste. S'il ne correspond pas, il masquera cet élément.
laisser aucun résultat = vrai;
pour (i = 0; je < listItems.longueur; je++) {
if (!listItems[i].innerHTML.toLowerCase().includes (entrée) || entrée "") {
listItems[i].style.display="aucun";
continuer;
}
autre {
listItems[i].style.display="fléchir";
aucun résultat = FAUX;
}
} - S'il n'y a aucun résultat dans la liste, masquez complètement la liste :
listContainer.style.display = aucun résultat? "aucun": "bloc"; - Clique sur le index.html fichier pour l'ouvrir dans un navigateur Web.
- Commencez à taper dans la barre de recherche. Au fur et à mesure que vous tapez, la liste des résultats sera mise à jour pour n'afficher que les résultats correspondants.
Utilisation d'une barre de recherche pour rechercher des résultats correspondants
Maintenant que vous savez comment créer une barre de recherche avec sélection de chaînes, vous pouvez ajouter plus de fonctionnalités.
Par exemple, vous pouvez ajouter des liens à vos balises d'ancrage pour ouvrir différentes pages en fonction du résultat sur lequel l'utilisateur clique. Vous pouvez modifier votre barre de recherche pour rechercher parmi des objets plus complexes. Vous pouvez également modifier le code pour travailler avec des frameworks comme React.