À 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
6 797 vues
Barre de recherche : Formulaire
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...
Créer son site
4 394 vues
Créer sa première page
Attention ! ⚠️ À partir de ce cours je ne détaillerais plus comme le cours précédent.À la place il sera expliqué ce que la vidéo va vous apporter et .. comme toujours le code sera...
Créer son site de rencontres
2 063 vues
Envoyer un message sans recharger la page (1/2)
Nous allons améliorer notre messagerie interne vu que nous pouvons désormais envoyer et recevoir des messages.Pour cela nous allons utiliser du JavaScript avec de l'Ajax afin de faire des...
Créer son site de rencontres
356 vues
Positionnement statique, relatif, absolu et fixe
Positionnement Statique, Relatif, Absolu et Fixe en CSSEn CSS, le positionnement des éléments peut être contrôlé en utilisant différentes propriétés. Les quatre types de positionnement les...
CSS
325 vues
Passage de paramètres
Passage de Paramètres dans les Fonctions en JavaScriptLorsque vous appelez une fonction en JavaScript, vous pouvez lui transmettre des valeurs en utilisant des paramètres. Ces paramètres sont des...
JS
1 476 vues
Voir plus de messages (1/2)
Dans cette nouvelle vidéo nous allons ajouter un bouton 'voir plus' qui va nous permettre de voir d'anciens messages. Nous allons commencer par mettre en place le bouton suivi du procédé pour voir...
Créer son site de rencontres
2 030 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
4 298 vues
Formulaire d'inscription en PHP (1/2)
Vous allez maintenant découvrir ou redécouvrir les joies de réaliser son premier formulaire d'inscription en PHP / SQL.Pour cela nous allons construire un formulaire avec des champs à remplir...
Créer son site de rencontres
Publicité
Cette pub permet au site de vivre ...