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.

6545 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
4 326 vues
Structure de base d'une page HTML
Cours sur la Structure de Base d'une Page HTMLLa structure de base d'une page HTML est essentielle pour créer des sites Web. Comprendre cette structure vous permettra de démarrer efficacement dans...
HTML
149 vues
Opérateurs arithmétiques, logiques et de comparaison
Opérateurs en JavaScript1. Opérateurs Arithmétiques :Les opérateurs arithmétiques sont utilisés pour effectuer des opérations mathématiques sur des valeurs numériques.Addition (+) : Ajoute...
JS
14 086 vues
Première page (index.php)
Pour commencer à développer notre site nous avons besoin de créer une nouvelle page que l'on appellera index.php. Cette page fera office de page d'accueil car lorsque vous allez...
Créer son site
155 vues
Utilisation de l'élément <li> pour les éléments de liste
Utilisation de l'élément <li> pour les éléments de listeL'élément <li> est utilisé pour définir chaque élément individuel d'une liste, qu'elle soit ordonnée <ol> ou non...
HTML
142 vues
Retour de valeurs
Retour de Valeurs dans les Fonctions en JavaScriptLorsqu'une fonction est exécutée, elle peut renvoyer une valeur à l'endroit où elle a été appelée. Cette valeur peut être utilisée pour...
JS
167 vues
Utilisation des blocs try...catch
Utilisation des Blocs try...catch en JavaScriptLes blocs try...catch en JavaScript permettent de gérer les erreurs potentielles qui peuvent survenir lors de l'exécution d'un bloc de code. Ils...
JS
3 735 vues
Utilisation des balises <h1> à <h6> pour les titres
Utilisation des balises <h1> à <h6> pour les titresLes balises <h1> à <h6> sont utilisées pour définir les niveaux de titre dans une page HTML. Elles vont du titre le plus...
HTML
1 194 vues
Afficher plus de conversation
Dans cette avant-dernière vidéo sur la création d’une messagerie interne nous allons personnaliser rapidement la page pour afficher les conversations et nous allons également corriger /...
Créer son site de rencontres
Publicité
Cette pub permet au site de vivre ...