FoxyComplete - Recherche avancée avec saisie automatique avec des images
Aujourd'hui, je vais partager une fonctionnalité à la mode que j'ai implémentée dans mes projets depuis un moment déjà.
Je l'appelle "FoxyComplete" et ce qui est fait, c'est de récupérer les résultats de recherche cliquables avec les images, soit automatiquement à partir du contenu du résultat, soit d'un fichier spécifié. Il est facile à mettre en œuvre et une fois fait, facile à modifier.
L'application de cette fonctionnalité dépend uniquement des préférences du concepteur et du développeur, mais son impact sur l'expérience de l'utilisateur en fait un choix de choix dans les projets de conception et de développement modernes.
Les unités commerciales où j'ai personnellement utilisé cette fonctionnalité sont le commerce électronique, les conceptions d'entreprise, la photographie, le divertissement et les projets futurs qui nécessitent une fonction de recherche complète.
Je suis sûr que vous avez tous visité le IMDb et Pomme sites Web et essayé leurs fonctionnalités de recherche. Si ce n'est pas le cas, voici un aperçu de la fonctionnalité de recherche avancée.
Nous savons tous que cela peut être fait, mais alors la question est: "Pourquoi ne le fait-on pas habituellement sur tous ces sites Web magnifiquement conçus?" Eh bien, je suppose qu'il manque probablement une solution rapide et ouverte à tous!
Lorsque j'ai implémenté la même recherche de saisie semi-automatique avec les images Blog Photographie ce que j’avais dessiné il ya quelque temps, c’était sûrement difficile à réaliser, mais au final ça a été génial. Les visiteurs de mon blog aiment vraiment chercher dans ma galerie d'images et obtenir instantanément un aperçu de ce qu'ils verront ensuite.
Vous trouverez ci-dessous la fonction de recherche de mon blog .
Dans ce tutoriel, je vais couvrir les points mentionnés ci-dessous
- Un bref aperçu du script
- FoxyComplete en tant que plugin WordPress (local / dynamique)
- Implémenter FoxyComplete comme une recherche Youtube avec des images
- Améliorer la sécurité
Pour WordPress Designers , c'est un jeu d'enfant et pour les développeurs WordPress / PHP , c'est une grande opportunité d'explorer ses nombreuses fonctionnalités et applications. Pour une implémentation avancée, les exigences seraient une connaissance de base de WordPress, PHP, HTML, jQuery et CSS.
Un bref aperçu du script
Commençons rapidement par jeter un coup d’œil à ce que nous allons créer dans ce tutoriel. S'il vous plaît cliquer sur l'image ci-dessous pour un démo de base .
Gardez à l'esprit que ce tutoriel est très basique pour que tout le monde le comprenne et que tout le monde puisse le concevoir ou le modifier en fonction de ses besoins. La fonctionnalité que j'ai créée a été inspirée par la Plugin de saisie semi-automatique jQuery par Jorn Zaefferer.
L'exemple rapide ci-dessus remplit automatiquement le titre du résultat, mais nous pouvons également le modifier pour rediriger vers une URL sur select (effectuée dans la section suivante). L'identifiant du champ de recherche est conservé en tant que "s", qui est utilisé par défaut pour WordPress Search Field (ce serait utile car nous poursuivons ce concept pour développer un plugin WordPress).
Styliser les résultats est facile: il est constitué d'une structure propre, facile à coiffer en fonction de votre conception.
.ac_results -> .ac_results ul -> .ac_results ul li -> .ac_results ul li a -> .ac_results ul li a img et .ac_results ul li a span
Cet exemple de base utilise une source de données statique qui est un simple fichier JavaScript dans lequel nous avons déclaré un tableau au format JSON. Toutes nos fonctionnalités permettent d’analyser le tableau et d’afficher les résultats.
Ne vous inquiétez pas, c'est juste un tableau avec base paires clé et valeur et rien de plus que ça. Nos clés sont le lien permanent pour nous amener à la page de résultats, l' image à prévisualiser et le titre dans lequel nous devons rechercher la chaîne. J'ai conservé une image par défaut et un exemple de titre pour cette démonstration de base.
Exemple de structure de tableau
[{“KEY 1”: “VALUE”, “KEY 2”: “VALUE”, “KEY 3”: “VALUE” },{“KEY 1”: “VALUE”, “KEY 2”: “VALUE”, “KEY 3”: “VALUE” },{“KEY 1”: “VALUE”, “KEY 2”: “VALUE”, “KEY 3”: “VALUE” }… Repeat as much as you want to]La fonctionnalité JavaScript est facile. Nous analysons simplement la matrice JSON résultante dans jQuery, formater les résultats en fonction de nos besoins et les afficher.
Conseil pour les développeurs: Si vous souhaitez modifier l'affichage des résultats, consultez la fonction format () du script foxycomplete.js. C'est une fonction JavaScript qui prend un tableau en entrée et renvoie un HTML formaté contenant les éléments du tableau. Assez simple à comprendre mais si vous cherchez à le changer, faites-le ici!
FoxyComplete comme un plugin WordPress (local / dynamique)
Cliquez sur l'image ci-dessous pour télécharger le plugin WordPress en tant que fichier .zip.
Pour les designers
J'espère que vous vous souviendrez que j'ai dit que c'était censé être un morceau de gâteau pour les concepteurs, eh bien, le voici! FoxyComplete comme un plugin WordPress Plug-n-Play Cela fonctionne dès la sortie de la boîte, une simple configuration est nécessaire pour une implémentation de base. Tout ce que vous avez à faire est de le télécharger, de l'installer et de jouer pendant que vous le concevez.
Les options du plugin sont les suivantes:
Activer la recherche locale: Après avoir parcouru quelques sites Web, j'ai trouvé que leur option de recherche était incroyablement rapide, même avec un IMDB, par exemple, contenant une énorme base de données. La première chose qui a frappé était leurs serveurs rapides avancés, mais qu'en est-il des utilisateurs réguliers qui ont partagé l'hébergement et des quantités variées de données? C'est pourquoi j'ai fait de la recherche locale une option prioritaire. Il charge simplement un fichier JavaScript dans le pied de votre installation WordPress contenant un tableau vers tous vos messages et pages, ainsi que leurs URL et, le cas échéant, les aperçus d'images. Le plugin utilise par défaut la recherche dynamique, mais vous pouvez le changer à tout moment pour la recherche locale.
Limite: Une personne aurait besoin d'un contrôle sur la limite des résultats affichés. Il permet de rester cohérent avec la conception et permet aux utilisateurs d’obtenir uniquement les résultats les plus pertinents. La valeur par défaut est cinq des principaux résultats pertinents.
Largeur de la saisie semi-automatique: à l' origine, elle était toujours égale à la largeur de l'entrée, mais je me suis alors rendu compte que nous ne cherchions pas dans une zone de recherche large de style Google. Par défaut, la largeur de l'élément en entrée est toujours définie, mais vous pouvez la modifier à tout moment.
Identifiant de l'entrée: Puisqu'il s'agit d'un plugin WordPress, j'ai préféré "#s" comme choix par défaut, qui peut être modifié comme vous le souhaitez. Il suffit d'entrer l'ID (sans le '#') de l'élément d'entrée souhaité et c'est parti.
Image par défaut: Parfois, le plug-in peut ne pas trouver une image pertinente et pour cela j'ai inclus une image de démonstration, mais vous avez également le contrôle: remplacez-le par votre propre image-échantillon dans le répertoire du plug-in.
La recherche dynamique recherche le contenu pertinent de manière intelligente et fournit immédiatement un tableau JSON dynamique à la fonctionnalité. Tout d'abord, il collecte tous les articles et pages de l'installation WordPress publiés et publics. Ensuite, il recherche les images en 3 étapes à partir du contenu:
- Téléchargement de médias
- Champ personnalisé "Miniature"
- Images dans le contenu de l'article
Une fois qu'il a toutes les données, il combine le titre et le contenu respectif de chaque article / page et recherche l'élément recherché pour une expérience de recherche complète. Une fois trouvé, disons X nombre d'éléments - il pousse ces X à un tableau JSON, qui est renvoyé à la fonctionnalité JavaScript.
Fonctionnalité dynamique vs locale
C'est un sujet critique et je suis ouvert à une discussion dans la section des commentaires. Personnellement, j'estime qu'il n'y a aucun mal à donner à ces personnes une source locale si cela améliore l'expérience de plusieurs façons. Une autre raison pour laquelle j'ai implémenté la recherche locale est que j'ai même trouvé Google dans Gmail.
Une fois que l'utilisateur se connecte, Gmail envoie une demande à son serveur et récupère toutes les adresses e-mail et les noms ou alias de tous vos contacts dans le pied de page qui sont ensuite utilisés pour les champs de saisie semi-automatique. Que dites-vous, légitime?
Implémenter FoxyComplete comme une recherche de type YouTube avec des images
Comme mentionné ci-dessus, il existe également de nombreuses fonctionnalités pour les développeurs. Ci-dessus, nous avons utilisé les flux YouTube, puis les avons analysés en PHP pour obtenir les résultats requis au format JSON. Vous pouvez en apprendre davantage sur ces ici . Cliquez sur l'image ci-dessous pour une démonstration de la recherche YouTube Foxycomplete.
Une autre fonctionnalité que vous pouvez faire est le moteur de recherche YouTube avec lecture sur clic en mode modal ou superposition. Par exemple, lorsque vous recherchez une vidéo et que vous cliquez dessus dans les résultats de la saisie semi-automatique, une boîte de dialogue modale ou une incrustation de la vidéo y est affichée, diffusée sur votre site Web mais provenant de YouTube. Nice, n'est-ce pas?
Améliorer la sécurité
Bien que le plugin WordPress soit sécurisé comme je l'ai utilisé WordPress Nounces , il peut même être sécurisé en utilisant des constantes dans la version dynamique et le chiffrement dans le local.
Une mesure de sécurité que nous avons utilisée consistait à rechercher un appel Ajax, puis à vérifier également un appel Ajax provenant du même domaine, comme indiqué ci-dessous.
//define SAME_DOMAIN to true in the Header of your document.define('IS_AJAX', isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest');define('DOING_AJAX', true);if(IS_AJAX && DOING_AJAX && SAME_DOMAIN){//your search logic}Ce n'est que l'une des nombreuses façons de le sécuriser!
Conclusion
C'était donc le FoxyComplete qui pourrait vous aider beaucoup dans vos projets de conception et de développement à l'avenir. Ceci est la version 1.0 et je vais m'assurer de continuer à l'améliorer avec vos précieux commentaires et votre support.
Faites-moi savoir ce que vous pensez dans la section commentaires ci-dessous et comme il est hébergé dans un environnement, je peux facilement et régulièrement modifier, avec vos super suggestions, permet d'en faire un plugin gratuit avec une expérience utilisateur ultime aux deux extrémités.