jquery php implémente le champ de recherche automatique prompt

jquery php implémente le champ de recherche automatique prompt_jquery

WBOY

Libérer： 2016-05-16 16:29:53

original

2255 Les gens l'ont consulté

Aujourd'hui, je souhaite soudainement créer une page de recherche pour ce site, afin que les utilisateurs puissent trouver leur contenu préféré via la recherche et éviter d'avoir à trouver manuellement des ressources dans des informations massives. Mon objectif est similaire à l'effet de la page d'accueil de Baidu. Lorsque l'utilisateur saisit le texte qu'il souhaite rechercher, nous lui fournissons ci-dessous dix informations pertinentes. Si l'utilisateur recherche l'une de ces dix informations, il suffit de cliquer pour ouvrir la page dans une nouvelle page. La raison principale est de mettre à jour la page, de la rendre plus conviviale et de la rendre plus pratique à utiliser pour les utilisateurs.

Regardons d'abord les rendus. Cela vous donnera plus de motivation, sinon vous ne saurez pas de quoi je parle et quel effet je souhaite obtenir !

jquery php implémente l'invite automatique du champ de recherche

Ce qui suit explique principalement le principe :

Dans la page search.html, lorsque l'utilisateur saisit "j" dans le champ de recherche, utilisez javascript pour obtenir le contenu textuel du champ de recherche, recherchez le contenu pertinent dans la base de données et renvoyez-le, puis utilisez javascript pour afficher les résultats renvoyés par le serveur dans La zone d'invite située sous la zone de recherche permet aux utilisateurs de faire des choix de référence.

Méthode de mise en œuvre spécifique :

Tout d'abord, créez un champ de recherche, un bouton de recherche et une couche d'invite de recherche sur la page, comme indiqué ci-dessous

Copier le code Le code est le suivant :

Utilisez le navigateur pour parcourir la page et vous verrez l'effet comme indiqué ci-dessous
jquery php implémente des invites automatiques lorsque les utilisateurs saisissent le contenu de la recherche
Cela a l'air très ordinaire et n'a pas de style. Faisons maintenant quelques ajustements au style

Copier le code Le code est le suivant :

#recherche{font-size:14px;}

#search .k{padding:2px 1px; width:320px;} /*Agrandissez la largeur du champ de recherche*/

Ajustez le style du calque qui affiche l'invite de recherche. Étant donné que le calque d'invite de recherche se trouve directement sous le champ de recherche, nous définissons sa méthode de positionnement sur positionnement absolu

Méthode de positionnement*/
Utilisez ensuite JS pour placer la couche d'invite de recherche directement sous le champ de recherche, et la largeur est la même que celle du champ de recherche. Ici, nous utilisons jQuery pour le résoudre

Copier le code Le code est le suivant :

$('#search_auto').css({'width':$('#search input[name="k"]').width() 4});

La position et la largeur du calque d'invite de recherche ont été déterminées. Étant donné que la boîte d'invite ne sera pas affichée avant que l'utilisateur n'entre le texte de recherche, nous devons d'abord la définir sur masquée et ajouter l'affichage au style du calque d'invite. : personne ne le cache.

Tout va bien. Il ne nous reste plus qu'à enregistrer l'événement pour le onkeyup du champ de recherche. Nous utilisons toujours jQuery pour le gérer. Dans jQuery, c'est keyup

Copier le code Le code est le suivant :

$('#search input[name="k"]').keyup(function(){

$.post('search_auto.php',{'value':$(this).val()},function(data){ //Envoyer les données de publication à search_auto.php sur le serveur, $.post est une méthode jQuery 

if(data=='0') $('#search_auto').html('').css('display','none'); //Juge les données renvoyées sur le serveur si elles sont égales à 0. , cela signifie qu'aucun contenu pertinent n'a été trouvé, alors effacez et masquez le contenu de la boîte d'invite

else $('#search_auto').html(data).css('display','block'); //Si les données renvoyées sur le serveur ne sont pas égales à 0, placez le contenu renvoyé dans la zone d'invite et affichez-le. la boîte d'invite

});

});

Le client ci-dessus est terminé et peut envoyer l'entrée de l'utilisateur au serveur et répondre à la valeur de retour du serveur.
Alors, comment le serveur traite-t-il les données envoyées par le client ? Prenons PHP comme exemple

Copier le code Le code est le suivant :

$v=$_POST[valeur];
$re=mysql_query("select * from test which title like '%$v%' order by addtime desc limit 10"); //Requête des résultats liés à 10 dans la base de données en fonction des données envoyées par le client
if(mysql_num_rows($re)<=0) exit('0'); // Jugez le résultat de la requête, alors renvoyez 0
directement. echo '

'.$ro[title].'

Fermer '; //Entrez un bouton de fermeture afin que les utilisateurs puissent cliquer pour le fermer lorsqu'ils ne veulent pas voir la couche d'invite. Le bouton de fermeture utilise jQuery Pour expliquer, le bouton. actuellement cliqué est $(this), Allez jusqu'à son troisième élément parent et faites-le disparaître
echo '

';
?>

Maintenant, le serveur peut exécuter correctement les données que nous avons envoyées et renvoyer les résultats correspondants. Entrez maintenant un texte dans le champ de recherche pour le tester, mais le principe est qu'il doit y avoir quelque chose en rapport avec ce texte dans le contenu de votre base de données. sinon, vous ne verriez pas la boîte de dialogue apparaître car il n'y a pas de contenu d'invite pertinent, haha.

Mais il y a encore un léger défaut, c'est-à-dire que le contenu de la boîte d'invite n'est pas beau Par rapport à la boîte d'invite que nous avons vue dans la recherche Baidu, il est tout simplement trop moche, ne vous inquiétez pas, nous le ferons. utilisez CSS pour ajuster l'affichage. L'effet de

Copier le code Le code est le suivant :

#search_auto li{background:#FFF; text-align:left;} /*Définissez l'effet de la balise li dans la zone d'invite*/

#search_auto li.cls{text-align:right;} /*Définissez l'effet du bouton de fermeture dans la zone d'invite*/

#search_auto li a{display:block; padding:5px 6px; curseur:pointer; color:#666;} /*Définissez l'effet d'étiquette sous l'étiquette li dans la zone d'invite*/

#search_auto li a:hover{background:#D8D8D8; text-decoration:none; color:#000;} /*L'effet lorsque la souris se déplace dans la zone d'invite*/

Maintenant, c'est vraiment entièrement terminé. Quant à savoir s'il faut mettre en place un traitement différé ou d'autres fonctions plus complètes, c'est aux amis d'utiliser leur propre cerveau. Vous pouvez également répondre à vos réflexions ci-dessous, etc.
Code client complet :

Copier le code Le code est le suivant :

jquery php implémente une invite automatique lorsque les utilisateurs saisissent le contenu de la recherche

Code complet côté serveur :

Copier le code Le code est le suivant :

$v=$_POST[valeur];
$re=mysql_query("select * from test which title like '%$v%' order by addtime desc limit 10");
if(mysql_num_rows($re)<=0) exit('0');
echo '

'.$ro[title].'

Fermer ';
echo '

';
?>

C'est une fonction très pratique, et elle est très efficace pour améliorer l'expérience utilisateur et la convivialité. Les amis peuvent combiner cet article avec le jeu gratuit et l'ajouter à leurs propres projets.