À 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
89 vues
Les promesses
Les Promesses en JavaScriptLes promesses sont un mécanisme de gestion asynchrone en JavaScript qui permet de gérer plus facilement les opérations asynchrones et d'éviter le "callback hell". Les...
JS
2 731 vues
Comprendre les différentes catégories de commandes SQL
SQL, ou Structured Query Language, est composé de plusieurs catégories de commandes, chacune ayant un rôle spécifique dans la manipulation et la gestion des bases de données relationnelles. Les...
SQL
3 402 vues
Créer un topic
Créer un topicDans notre dossier **f_forum**, nous allons créer une nouvelle page creer_topic.php. Cette page permettra à vos utilisateurs de pouvoir créer un topic afin de demande de l'aide,...
Créer son site
4 799 vues
Le langage HTML
Avant de commencer cet article nous allons commencer par un rappel.Rappel : Pour développer en HTML, il faut utiliser n'importe quel éditeur de texte et enregistrer le fichier au format .html afin...
Créer son site
2 730 vues
Créer des listes ordonnées <ol> et non ordonnées <ul>
Créer des listes ordonnées avec <ol> et non ordonnées avec <ul>Les balises <ol> et <ul> sont utilisées pour créer respectivement des listes ordonnées et non ordonnées...
HTML
1 821 vues
Voir son profil en PHP
Maintenant que vous savez comment voir le profil d'un membre du site nous allons apprendre à concevoir notre profil !
Créer son site de rencontres
9 487 vues
Valider son compte avec un mail
Dans cet article nous allons développer un système qui permettra d'envoyer un mail à votre nouvel utilisateur avec une clé afin de confirmer son compte sur votre site.Pour commencer il faudra...
Créer son site
1 242 vues
Personnaliser ses conversations
Dans cette dernière vidéo nous allons personnaliser notre messagerie ! 😎Pour cela nous allons donner l’aspect des conversations comme une messagerie de smartphone type Apple ou Samsung.Nous...
Créer son site de rencontres
Publicité
Cette pub permet au site de vivre ...