chaque site Web a besoin d’une barre de recherche à travers laquelle un utilisateur peut rechercher le contenu de sa préoccupation sur cette page. Une barre de recherche de base peut être faite en utilisant HTML, CSS et JavaScript uniquement. Les algorithmes de recherche avancés recherchent beaucoup de choses comme le contenu associé, puis affichent les résultats. Celui que nous allons faire cherchera des sous-chaînes dans une chaîne.
HTML
dans cette section, nous allons écrire une partie HTML du code. En HTML, nous allons simplement lier nos feuilles de style et notre fichier JavaScript., Input tag est utilisé pour la création de la barre de recherche et il comprend plusieurs attributs comme type, espace réservé, nom. Nous avons également besoin d’une liste d’éléments qui contiendront différents noms d’animaux qui nous permettront de rechercher des animaux à travers cela. Les classes et les identifiants utilisés dans les balises seront définis dans la feuille de style ci-dessous.
Résultat:
CSS
Si au-dessus de la balise d’entrée et la liste ordonnée a l’air bien, il a encore besoin de quelques style., Pour le style de la barre de recherche, une marge et un rembourrage sont ajoutés pour le rendre propre. Les mesures sont en pourcentage de sorte qu’il s’ajuste lorsqu’il est utilisé dans n’importe quelle taille de l’écran (Mobile, bureau, etc.). La transition Webkit est utilisée pour modifier la largeur de la barre de recherche lorsque vous cliquez dessus. La largeur initiale de la barre de recherche est de 30%, mais lorsque vous cliquez dessus, elle passe à 70% avec une transition facile de 0,15 seconde.
sortie
Après avoir ajouté le style, notre page devrait ressembler à ceci.
Remarque: Si le style de votre page ne change pas, assurez-vous que le style.,le fichier css est dans le même dossier que l’indice.HTML.
Il est encore incomplet, car nous avons encore besoin du JavaScript pour compléter les fonctionnalités de cette barre de recherche.
JavaScript
dans le code HTML de la barre de recherche, nous avons donné à l’entrée un id=”searchbar” et onkeyup nous avons appelé, la fonction « search_animal”. onkeyup appelle la fonction chaque fois qu’une touche est relâchée sur le clavier.
Nous obtenons d’abord notre entrée en utilisant getElementById. Assurez-vous de le convertir en minuscules pour éviter la casse lors de la recherche. Un tableau de documents est stocké dans X. Il contient chaque liste qui a id= « animals »., Après cela, une boucle est exécutée pour vérifier si innerHTML de chaque document inclut la sous-chaîne d’entrée si ce n’est pas le cas, la propriété display est définie sur ‘None’ afin qu’elle soit invisible sur le frontal.
sortie: