Avant d'entamer le développement de notre barre de recherche nous allons reprendre le fichier index.php des articles précédents.
Dans notre fichier index.php nous allons y ajouter une nouvelle librairie afin d'y exploiter les fonctions Ajax.
La nouvelle ligne à ajouter à notre fichier sera celle-ci :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Fichier index.php
<?php
...
?>
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Ensuite nous allons ajouter un formulaire contenant un champ input de type text. Pour cela je vais exploiter les classes CSS de Bootstrap afin d'aller plus vite dans la réalisation de notre formulaire.
<body>
...
<div class="container">
<div class="row">
<div class="col-sm-0 col-md-2 col-lg-3"></div>
<div class="col-sm-12 col-md-8 col-lg-6">
<h1 style="text-align: center">Barre de recherche</h1>
<div class="form-group">
<input class="form-control" type="text" id="search-user" value="" placeholder="Rechercher un ou plusieurs utilisateurs"/>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
Notre formulaire est maintenant mis en place. Nous allons voir sur le prochain article comment communiquer avec une autre page afin d'afficher les résultats de notre recherche sans recharger la page.