Google comme la boîte de recherche autosuggestion en utilisant PHP, MySQL - Jquery
0 sur 5 Basé sur 0 évaluations des utilisateurs
Web est la maison de l'information. Des millions travaillent jour - nuit pour améliorer le Web. Dans cette course pour trouver l'information correcte des moteurs de recherche que vous devez rechercher à bon escient. Vous devez parfois remarqué qu'il était difficile de trouver une chaîne de recherche appropriée en fonction du besoin. Dans ce cas fonctionne installation autosuggestion impressionnant. Le roi des moteurs de recherche Google fournit cette installation. Pour mettre en œuvre la même chose dans votre application avec cette démo, j'ai créé une boîte de recherche autosuggestion en utilisant PHP et JQuery. Données Je la base de données MySQL aller chercher.
Pour créer cette démo ici, je suis avec 4 fichiers index.htm, main.css, loading.js - live search.php. Le fichier HTML contient un conteneur qui détiennent un contrôle d'entrée avec identifiant txtSearch. En dessous de la zone de recherche, j'ai un div pour afficher les chaînes de autosuggestion. Initiale lors du chargement de la page I hided ce en utilisant CSS display: none.
Le fichier CSS ci-dessous donne l'air n se sentir à mes éléments HTML. Ici, en fonction de la largeur de la zone de recherche J'ai appliqué la même à la recherche div résultat.
logique de base pour la boîte de recherche autosuggestion est en cours d'exécution dans le fichier ci-dessous JS. Ici, en utilisant Jquery Je le suivi de l'événement keyup de la zone de recherche. Dans ce en utilisant la méthode Ajax JQuery J'envoie des entrées utilisateur à vivre-search.php. Pour maintenir la transmission sécurisée des données dans l'appel Ajax je méthode POST.
loading.js
En cas de succès de la méthode Ajax JQuery Je liant les données de réponse à searchresults div. Voici mes données de réponse est HTML pur. Ce qui est programmé dans le fichier PHP ci-dessous. Ce code HTML contient un div avec le nom de classe en direct les résultats. Après l'affichage panoramique autosuggestion pour gérer la sélection d'utilisateur J'assigne la valeur sélectionnée pour le champ de recherche dans les résultats en direct-cliquez sur l'événement. Une fois que la valeur sélectionnée mappée sur le champ de recherche, je me cache la poêle Résultats de la recherche.
vivre-search.php
Le fichier PHP ci-dessus des entrées utilisateur aller chercher de la méthode JQuery Ajax en utilisant $ _POST [ « SearchString ']. Ensuite, en utilisant une MySQL requête de sélection J'utilise la recherche sauvage-char avec limite de 5 enregistrements. Puis afficher ces données dans une boucle en utilisant div. Pour appliquer CSS sur ces DIV j'Assigné classes pour eux.
Pour fins de démonstration dans MySQL créer un db avec le nom « demo_db ». Ensuite, en utilisant la requête suivante Création d'une table pour les professeurs.
Une fois la table créée avec succès insérer des données en utilisant les instructions SQL suivantes.
Espérons que l'explication ci-dessus vous clairement sur la logique derrière cette application de démonstration. Enrichissez votre demande Recherche installation avec autosuggestion. Cela rendra votre plus convivial d'application.