À 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
201 vues
Affichage de texte avec echo et print
L'affichage de texte est une opération de base en PHP, souvent utilisée pour fournir une sortie à l'utilisateur. Les instructions echo et print sont les principales méthodes utilisées pour...
PHP
1 809 vues
Utilisation de l'instruction SQL INSERT INTO pour ajouter des données à une table
1. Accéder à PhpMyAdmin :Ouvrez un navigateur web et accédez à l'URL où vous avez installé PhpMyAdmin sur votre serveur.2. Authentification :Connectez-vous à PhpMyAdmin en utilisant vos...
SQL
285 vues
Variables : déclaration, types de données (chaînes de caractères, nombres entiers et flottants, booléens)
Les variables sont des éléments fondamentaux en programmation, utilisées pour stocker des données et leur attribuer des noms. En PHP, les variables peuvent stocker différents types de données,...
PHP
1 952 vues
Définition des caractéristiques de la base de données : le nom, le jeu de caractères, etc.
1. Accéder à PhpMyAdmin :Ouvrez un navigateur web et accédez à l'URL où vous avez installé PhpMyAdmin sur votre serveur.2. Authentification :Connectez-vous à PhpMyAdmin en utilisant vos...
SQL
3 693 vues
Créer un article
Créer un articleNous allons créer une nouvelle page que l'on nommera creer_article.php. Cette page permettra de créer un article qui sera visible sur le blog.Nous allons modifier notre...
Créer son site
1 773 vues
Création de tables avec PhpMyAdmin
1. Accéder à PhpMyAdmin :Ouvrez un navigateur web et accédez à l'URL où vous avez installé PhpMyAdmin sur votre serveur.2. Authentification :Connectez-vous à PhpMyAdmin en utilisant vos...
SQL
4 041 vues
Créer un commentaire
Poster un commentaireDans notre dossier f_forum, nous allons reprendre la page topic.php. Dans cette page nous allons ajouter la possibilité à vos utilisateurs de pouvoir poster des commentaires...
Créer son site
17 838 vues
Mot de passe oublié en PHP
Il arrivera souvent qu'un utilisateur oublie son mot de passe. Pour y remédiez nous allons modifier notre base de données avec un nouveau paramètre nous permettant de savoir si...
Créer son site
Publicité
Cette pub permet au site de vivre ...