Recherche avec filtres et complétion automatique en React.js

Attention ! Cet article a plus de 1 an (2393 jours), ce qui signifie qu'il n'est pas forcément à jour !

Tout d’abord, je suis assez débutant en ReactJS. Le code que je vais mettre ici est loin d’être parfait. Mais bon tout en découvrant ReactJS, je me donne comme défi de faire quelques petits "components" qui me seront peut-être utile un jour. Alors voici mon code pour un champ de recherche avec filtre et complétion automatique

Pour débuter

Pour que l’on puisse utiliser ReactJS, on doit "linker" à la librairie.

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.14.0/babel.min.js"></script>

HTML

La structure est des plus simple.

<div class="mainFrame cf">
  <div class="inner">
    <h1>Recherche avec Filtre en React.js</h1>
    <div id="Recherche"></div>
  </div>
</div>

Du reste, voici le résultat, le JS ainsi que le CSS

See the Pen Recherche avec Filtre en React.js by René Domingue (@rdomingue) on CodePen.

Catégories :