À partir de maintenant nous allons développer notre script permettant de contacter une page et de l'exécuter afin d'afficher le résultat de notre saisie.

Nous allons commencer par mettre cette ligne ci-dessous. Cette ligne permettra d'exécuter notre code JavaScript une fois notre page sera complètement chargée.


$(document).ready(function(){
    ...
});


Ensuite, nous allons ajouter une fonction JavaScript qui permet de capter la sortie d'appui d'une touche d'un clavier (virtuel ou physique).

$(document).ready(function(){
    $('#search-user').keyup(function(){
        ...
    });
});


De là, nous allons utiliser une fonction Ajax qui nous permettra de communiquer avec une autre page. (HTML, PHP, etc.)

$.ajax({
  type: '',
  url: '', 
  data: '',
  success: function(data){
    ...
  }
});


Ici je vais vous expliquer comment remplir cette fonction :

  • type : Le type de méthode pour récupérer vos données : GET ou POST,
  • url : L'URL de la page où l'on souhaite s'adresser,
  • data : S'il y a des données à envoyer à la page où l'on s'adresse,
  • success : Message de retour contenant des données s'il n'y a pas d'erreurs de communication avec l'adresse URL.


Maintenant que vous avez tous les éléments-clés, nous pouvons finir de développer notre script.

Le script complet donnera ceci au final :


<script>
  $(document).ready(function(){
    $('#search-user').keyup(function(){
      $('#result-search').html('');

      var utilisateur = $(this).val();

      if(utilisateur != ""){
        $.ajax({
          type: 'GET',
          url: 'fonctions/recherche_utilisateur.php',
          data: 'user=' + encodeURIComponent(utilisateur),
          success: function(data){
            if(data != ""){
              $('#result-search').append(data);
            }else{
              document.getElementById('result-search').innerHTML = "<div style='font-size: 20px; text-align: center; margin-top: 10px'>Aucun utilisateur</div>"
            }
          }
        });
      }
    });
  });
</script>


Derniers points essentiels :

  • La fonction $('#result-search').html(''); permet de mettre à blanc le résultat de notre recherche à chaque fois que nous effectuerons un appui,
  • Ici var utilisateur = $(this).val(); permets de récupérer notre saisie.


En fonction du résultat si data contient des données nous afficherons le résultat obtenu sinon nous afficheront un message pour indiquer qu'il n'y a pas de résultat concluant.

Nous avons donc notre script opérationnel. Sur le prochain article nous allons créer une nouvelle page PHP et mettre notre code qui nous permettra de rechercher nos utilisateurs.

+99999
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
2 789 vues
Mettre son site en ligne
Maintenant que vous avez développé votre propre site il est temps qu'il prenne son envole afin d'atterrir dans nos navigateurs (ex : google, bing, etc.) 😁👌Donc à partir de maintenant vous...
Créer son site
3 523 vues
Voir le profil d'un utilisateur en PHP
Maintenant que nous avons la liste des utilisateurs, nous allons créer une nouvelle page PHP afin de visiter le profil d'un membre dynamiquement.Pour cela nous allons passer dans l'URL l'identifiant...
Créer son site de rencontres
1 651 vues
Configurer l'environnement de développement
Configuration de l'environnement de développement pour SASS1. Création d'une structure de projet :Avant de commencer à coder en SASS, il est important d'avoir une structure de projet organisée....
Sass
2 549 vues
Barre de menu intelligente
Vous en avez marre de dupliquer votre code afin d'ajouter un nouveau lien sur votre barre de menus ?Alors dans cette vidéo vous allez apprendre à vous simplifier la vie en utilisant la fonction...
Créer son site de rencontres
666 vues
Syntaxe de base : balises PHP, commentaires
Introduction à la syntaxe de base en PHPPHP utilise une syntaxe simple et flexible pour écrire du code côté serveur. Commençons par explorer les balises PHP et les commentaires, deux éléments...
PHP
384 vues
Instructions conditionnelles (if, else, elseif)
Les instructions conditionnelles en PHP permettent d'exécuter des blocs de code en fonction de certaines conditions. Les trois principales structures conditionnelles en PHP sont if, else et elseif....
PHP
1 706 vues
Mixins : Créer des mixins pour réutiliser des blocs de styles
Mixins en SASS : Créer et Utiliser1. Déclaration de mixins :En SASS, les mixins sont déclarés à l'aide du mot-clé @mixin, suivi du nom du mixin et des paramètres entre parenthèses. Les styles...
Sass
3 891 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
Publicité
Cette pub permet au site de vivre ...