javascript indexOf
JavaScript

Javascript indexOf tutoriel : comment faire une searchbar rapidement?

Nous allons voir dans cet article comment utiliser en javascript la fonction indexOf. Je vais illustrer l’utilisation d’indexOf avec la création d’une searchbar.

indexOf

En javascript, indexOf est une méthode qui va s’utiliser sur des chaînes de caractères (string). La méthode va permettre de trouver l’index de la premiere occurence qu’il va trouver dans la chaîne de caractère. La valeur de l’index va commencer à 0 comme pour les arrays.

const str = 'Burger';
str.indexOf('Bu'); // 0

Si l’occurence n’est pas trouvée dans la chaîne de caractère, il va retourner -1.

const str = 'Burger';
str.indexOf('Te'); // -1

Comme vous l’aurez remarquer. Il prend en argument la chaîne de caractère que vous cherchez. Ici on recherche Bu dans Burger.

searchbar : indexOf + filter

Nous allons voir comment faire une petite searchbar. Je pars du principe que vous appelez une fonction onChange à l’aide d’un input :

<input type="text" onChange="search(event)" />

A noter que l’on passe l’argument event pour pouvoir récupérer la valeur que l’utilisateur a tapé dans l’input.

Nous n’allons pas nous focus sur l’affichage dans ce tutoriel. Il faut définir ensuite votre fonction de search :

function search(event){
    console.log(event.target.value); // affiche la valeur tapée dans l'input
}

Nous allons ensuite définir un tableau de valeur pour pouvoir faire notre exemple. Il faut que l’on fasse notre recherche dedans ensuite :

const aliments=["Burger",'Pizza','Tomate','Salade','Oignon'];
function search(event){
    console.log(event.target.value); // affiche la valeur tapée dans l'input
}

Je veux quand l’utilisateur tape “Pi”, cela renvoie un array avec Pizza comme item. Nous allons utiliser indexOf pour savoir si chacun des aliments contient ou non la chaîne de caractère tapée par l’utilisateur (event.target.value). Ensuite nous combinons indexOf avec filter pour renvoyer un tableau avec les items qui correspondent à la recherche.

const aliments=["Burger",'Pizza','Tomate','Salade','Oignon'];
function search(event){
    let updatedAliment = aliments.filter( (aliment) => aliment.indexOf(event.target.value) != -1); 
}

Nous avons deux choix :

  • aliment.indexOf(event.target.value) != -1 est égal à true si il trouve la chaîne de caractère
  • aliment.indexOf(event.target.value) != -1 est égal à false si il ne trouve pas la chaîne de caractère

Amélioration de la searchbar

Nous allons voir comment améliorer la searchBar pour pouvoir gérer les majuscules et minuscules.

Si votre utilisateur tape “pizza” sans majuscule, votre fonction search ne va pas trouver “Pizza” avec une majuscule. Pour pouvoir gérer cela nous avons deux solutions :

  • Utiliser toLowerCase() pour tout passer en minuscules
  • Utiliser toUpperCase() pour tout passer en majuscules
const aliments=["Burger",'Pizza','Tomate','Salade','Oignon'];
function search(event){
    let updatedAliment = aliments.filter( (aliment) => aliment.toLowerCase().indexOf(event.target.value.toLowerCase()) != -1); 
}

Voilà c’est tout pour cet article. Vous pouvez retrouver le code dans codepen juste ici :

https://codepen.io/pierre_terrat/pen/XWJGmqV

Si vous voulez aller plus loin dans votre apprentissage en javascript, je ne peux que vous conseiller de lire cet article :
http://pierreterrat.com/javascript-:-le-guide-ultime-pour-bien-commencer-a-apprendre/

Beaucoup d’efforts et de temps sont passés pour vous fournir du contenu de qualité, merci de partager et de commenter cet article pour faire vivre ce blog.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *