Barre de recherche : Formulaire

Par Clouder le 18 Mar 2019 (Édité) 0 +99

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.

Cette pub permet au site de vivre ...

Commentaire

Tu veux participer ?
Alors connecte toi ou inscris toi et viens participer !
Cette pub permet au site de vivre ...