Barre de recherche : Ajax

À 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.