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.

6737 vues
Modifié le 18 mars 2019
Publicité Sitedudev
Cette pub permet au site de vivre ...
Télécharger le code source
Publicité
Cette pub permet au site de vivre ...
Voir d'autres articles
29 vues
Éditer un cours
Les tableaux associatifs en PHP sont des structures de données qui permettent de stocker des paires clé-valeur, où chaque valeur est associée à une clé. Contrairement aux tableaux indexés, les...
PHP
491 vues
Utilisation des attributs id et class pour identifier et styler les éléments
Utilisation des attributs id et class pour identifier et styler les élémentsLes attributs id et class sont utilisés pour identifier et styler les éléments HTML en leur attribuant des...
HTML
2 223 vues
Ajouter un avatar
Nous allons maintenant ajouter des avatars à nos profils et afficher ses avatars lors de l’affichage des membres 😁
Créer son site de rencontres
3 889 vues
Afficher un topic
Afficher un topic de notre forumDans notre dossier f_forum, nous allons créer une nouvelle page topic.php. Cette page affichera le topique créé par un de vos utilisateur.Nous allons...
Créer son site
252 vues
Objets : création, propriétés, méthodes
Objets en JavaScript1. Création d'Objets :Un objet en JavaScript est une structure de données qui permet de stocker des collections de paires clé-valeur. Les clés sont des chaînes de caractères...
JS
4 403 vues
Afficher la liste des topics
Dans notre dossier f_forum, nous allons créer une nouvelle page sujet.php. Cette page affichera la liste des topiques créer par les utilisateurs de votre site en fonction de la catégorie...
Créer son site
286 vues
Création de tableaux avec <table>.
Création de tableaux avec <table>La balise <table> est utilisée pour créer des tableaux dans une page HTML. Elle permet de structurer les données tabulaires en lignes et colonnes....
HTML
3 370 vues
Afficher les commentaires
Nous allons reprendre notre page topic.php. Sur cette page nous allons afficher les commentaires postés de vos utilisateur.Dans notre page topic.php nous allons donc afficher les...
Créer son site
Publicité
Cette pub permet au site de vivre ...