Share
Ce didacticiel explique comment utiliser le flux "Requêtes courantes" de votre moteur de recherche personnalisé (CSE) Google en tant que source de données pour une saisie semi-automatique jQuery..
Le moteur de recherche personnalisé de Google vous permet de créer une fonctionnalité de recherche robuste pour votre site Web. Ils offrent un gratuit,
version prise en charge par la publicité et une version professionnelle premium à partir de 100 USD par an. De plus, le CST fournit une vaste gamme de mesures allant de l’intégration avec
Google Analytics à un flux de requêtes de recherche populaires.
Ce tutoriel vous montrera comment utiliser PHP et jQuery pour ajouter une fonctionnalité de complétion automatique au champ de recherche par défaut de CSE en utilisant le flux de requêtes de recherche très répandu comme source de données..
Pour utiliser cette technique avec succès sur votre site, vous aurez besoin de votre propre CSE Google et d'un trafic de recherche décent (afin de nous assurer que nous disposons d'un bon ensemble de données pour votre entreprise.
notre liste complète automatique).
Ne vous inquiétez pas si vous ne remplissez pas toutes ces conditions, vous pouvez toujours suivre. Google cite souvent l'implémentation CSE de MacWorld
à titre d'exemple, je vais donc utiliser leur fil de recherche dans ce tutoriel. N'hésitez pas à faire de même si vous le souhaitez.
Commençons.
La première chose à faire est d’ajouter le code de recherche par défaut du CST à une nouvelle page XHTML. Vous pouvez le trouver en vous connectant à votre panneau de contrôle et en cliquant sur "code". Ce sera
ressemble à quelque chose comme ça.
Enregistrez ce document dans un nouveau dossier sous le nom search.html et ouvrez-le dans votre navigateur. Rechercher quelque chose pour vous assurer que le champ de recherche fonctionne.
Bien que l’interface utilisateur de jQuery ait une fonction de complétion automatique intégrée, vous pouvez trouver le
Le plugin auto complete créé par Dylan Verheul, Dan G. Switzer, Anjesh Tuladhar et Jörn Zaefferer est un peu plus facile à utiliser. Télécharger
jquery.autocomplete.zip et décompressez-le.
L'archive du plugin contient une variété de scripts différents pour de nombreuses implémentations. La meilleure pratique consiste à déplacer les scripts et les feuilles de style que nous sommes
allez utiliser pour nommer de manière appropriée des dossiers à l'intérieur de la racine de notre page, dans un souci de simplicité, faisons simplement glisser le
"jquery-autocomplete" dans le dossier dans lequel se trouve notre search.html.
Le plugin est livré avec une démo illustrant la manière dont l'auto-complétion pourrait être utilisée avec des noms de ville. Assurez-vous que jQuery et notre plugin fonctionnent correctement
en reliant notre champ de recherche Google à la liste des villes. Dans search.html, ajoutez ce qui suit à l'intérieur du
Nous devrons également modifier légèrement le code de recherche par défaut de CSE en ajoutant un attribut id au champ de recherche. Nous l'appellerons "cse_search".
Enregistrez search.html et ouvrez-le dans votre navigateur. Dans la zone de recherche, commencez à taper le nom d'une ville. vous devriez voir le menu autocomplete.
Dans l'étape précédente, nous avons inclus le script "jquery-autocomplete / demo / localdata.js". Si vous ouvrez le fichier et que vous le regardez, vous verrez plusieurs
Tableaux JavaScript. Ce sont les tableaux utilisés pour remplir les listes de complétion automatique dans les fichiers de démonstration du plugin. Quand nous avons initialisé jQuery et demandé au plugin
pour compléter automatiquement notre boîte "cse_search", nous lui avons également demandé de récupérer ses données dans le tableau cities:
Accentsconagua
$ (). ready (function () $ ("# cse_search"). autocomplete (villes);); Nous devons maintenant demander à jQuery d'utiliser notre flux de requêtes populaires en tant que source de données. Mais comment?
Nous allons utiliser un peu de PHP pour extraire le flux de requêtes les plus répandues, l’analyser et pour afficher un tableau JavaScript valide. En incluant le fichier PHP comme nous le ferions
un fichier JavaScript normal, il sera exécuté en coulisse et le navigateur Web pensera lire un fichier JS statique.
De plus, nous allons également compléter notre fil de requêtes populaires avec des termes que nous spécifions. Les termes que nous spécifions ici peuvent ne pas être recherchés souvent
assez pour apparaître comme une "requête populaire", mais ils peuvent toujours être utile d'avoir dans notre liste de complétion automatique. Par exemple, les termes pour lesquels vous avez créé
Google a souscrit des liens ou des termes qui monétisent bien avec
AdSense pour les recherches.
Créez un fichier dans le dossier "jquery-autocomplete" appelé searchdata.php et collez-le dans les éléments suivants:
item en tant que $ item) $ search_term = strtolower (trim ($ item-> title)); // trim () est utilisé pour supprimer les espaces. if (! in_array ($ search_term, $ data)) // assurez-vous qu'il n'y a pas de doublons. $ data [] = $ search_term; // ajoute $ search_term au tableau de données. sort ($ data); // alphabétise le tableau // Formate les données pour la sortie JavaScript. foreach ($ data en tant que $ search_term) $ js_data [] = "\" ". $ search_term." \ ""; // Informons le navigateur que nous envoyons du JavaScript. en-tête ("Type de contenu: text / javascript \ n \ n"); // Ensuite, nous échapperons à PHP et créerons un tableau JavaScript. Dans le tableau, nous allons retourner à // PHP et utiliser implode () pour renvoyer une chaîne de toutes les données séparées par des virgules dans $ js_data. ?> var searchdata = []; 
Si vous utilisez votre propre flux CSE, vous souhaiterez remplacer l'URL à la ligne 7. Dans cet exemple, j'ai utilisé le flux de requêtes les plus populaires pour MacWorld.com..
Vous pouvez utiliser votre propre flux de requêtes populaires global en accédant à votre page CSE - Gestion> Statistiques>.
Global. Les autres options disponibles sont les flux de requêtes populaires par jour, semaine et mois..
Ensuite, nous devrons supprimer le script localdata.js de la démo de search.html et le remplacer par notre fichier searchdata.php:
Remplacer: Avec:
Nous devrons également modifier légèrement notre code d'initialisation:
Remplacez: $ ("# cse_search"). Autocomplete (villes); Avec: $ ("# cse_search"). Autocomplete (searchdata); Nous allons maintenant tout télécharger sur le serveur et donner un coup d’oeil à search.html. Si tout fonctionne comme prévu, votre auto complète
devrait fonctionner parfaitement.
Les sites qui reçoivent un volume de trafic important peuvent envisager de mettre en cache le tableau de recherche. Faire analyser le flux par le serveur
chaque fois que quelqu'un tape dans le champ de recherche, il utilisera une quantité importante de ressources. Vous pouvez mettre en cache les résultats en remplaçant votre
searchdata.php avec les éléments suivants:
Remarque: Le script créera le cache pour la première fois, mais il doit avoir un accès en écriture au répertoire dans lequel vous vous trouvez.
va le stocker dans.
item en tant que $ item) $ search_term = strtolower (trim ($ item-> title)); // trim () est utilisé pour supprimer les espaces. if (! in_array ($ search_term, $ data)) // assurez-vous qu'il n'y a pas de doublons. $ data [] = $ search_term; // ajoute $ search_term au tableau de données. sort ($ data); // alphabétise le tableau // Formate les données pour la sortie JavaScript. foreach ($ data en tant que $ search_term) $ js_data [] = "\" ". $ search_term." \ ""; // Configurez le cache $ fp = fopen ($ cache_path, "w"); // Crée le tableau JavaScript $ js_array = "var searchdata = [". imploser ($ js_data, ","). "];"; // Ecrit le tableau dans le cache fwrite ($ fp, $ js_array); // Ferme le cache fclose ($ fp); // Inclure le fichier de cache. include ($ chemin_c cache); ?>
