Comment faites-vous une de ces zones de recherche sur une page Web qui affiche un aperçu des résultats de recherche?

Question

Je développe un site web qui a un champ de recherche dans le modèle de page standard (similaire à ce que vous voyez en haut à droite du site SO). Je veux prévisualiser dynamiquement les correspondances possibles à l'entrée de l'utilisateur, similaire à ce que vous voyez lorsque vous commencez à saisir une requête dans la page de recherche google.com, sous la forme d'une liste déroulante qui apparaît sous la zone de recherche. Comment est-ce que tu fais ça? Une sorte de combinaison JavaScript/Ajax?

Answer 1

Il existe un jQuery plugin populaire pour y parvenir. Check the docs.

Answer 2

Vous pouvez utiliser jQuery pour cela, et lorsque l'événement keyup (ou un événement associé) est déclenché, vous pouvez envoyer une requête au serveur ou à une collection locale de mots, et afficher tout ce qui correspond dans un div ci-dessous la boîte.

$("#searchbox").keyup(function(){ 
    $.post("suggestions.php", {data:$(this).val()}, function(response) { 
    $("#suggestions").html(response).slideDown(); 
    }, "HTML"); 
}).blur(function(){ 
    $("#suggestions").slideUp(); 
}); 

/* 
--------------------- 
| ph_    | 
--------------------- 
| philanthropy  | 
| photoshop   | 
| PHP    | 
--------------------- 
*/