Share
La fonction get_search_form () peut (et devrait!) être utilisé pour afficher le formulaire de recherche de votre site. Cela fait le travail, mais c'est très fade. Livré avec WordPress depuis la version 3.3, cependant, est un outil qui peut en faciliter l’utilisation. Dans ce tutoriel, je vais vous montrer comment ajouter de la saisie semi-automatique jQuery à votre formulaire de recherche..
Ce tutoriel suppose que votre thème utilise get_search_form () pour afficher votre formulaire de recherche et vos appels wp_footer ().
Voyons d’abord le formulaire de recherche TwentyEleven (searchform.php dans votre thème). Les chances sont, le vôtre est très similaire. Si vous ne trouvez pas searchform.php dans votre thème, il utilise probablement la majoration par défaut qui est presque identique. Si votre formulaire de recherche est codé en dur, je vous recommande de le mettre dans searchform.php, et en utilisant get_search_form (); pour l'afficher.
Ce que nous recherchons, c'est l'attribut ID de l'entrée de recherche. Nous pouvons donc le cibler avec jQuery. Dans ce cas c'ests'.
Avant de commencer, faisons un peu de travail sur le terrain. Cela servira également de résumé de ce que nous ferons.
Tout ce qui suit devrait aller dans votre thème functions.php. Nous allons accrocher sur le 'init'hook avec une fonction qui va:
Accentsconagua
get_search_form le filtre se déclenche chaque fois que cela se produit, et nous l'utiliserons pour mettre en file d'attente nos scripts et nos styles.wp_ajax_ action et wp_ajax_nopriv_ action où action est utilisé comme identifiant pour l'action que nous souhaitons effectuer (et devrait donc être unique). Je vais le mettre à myprefix_autocompletesearch. add_action ('init', 'myprefix_autocomplete_init'); function myprefix_autocomplete_init () // Enregistrez notre style jQuery UI et notre fichier JavaScript personnalisé wp_register_style ('myprefix-jquery-ui', 'http: //ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/ jquery-ui.css '); wp_register_script ('mon_recherche', get_template_directory_uri (). '/js/myacsearch.js', array ('jquery', 'jquery-ui-autocomplete'), null, true); // Fonction à déclencher chaque fois que le formulaire de recherche est affiché add_action ('get_search_form', 'myprefix_autocomplete_search_form'); // Fonctions permettant de traiter la demande AJAX - une pour les utilisateurs connectés, l'autre pour les utilisateurs non connectés. add_action ('wp_ajax_myprefix_autocompletesearch', 'myprefix_autocomplete_suggestions'); add_action ('wp_ajax_nopriv_myprefix_autocompletesearch', 'myprefix_autocomplete_suggestions'); Nous utiliserons AJAX pour envoyer les données du formulaire de recherche et renvoyer les messages correspondants sous le type d'utilisateur. Nous aurons donc besoin de donner à Autocomplete l'adresse URL à laquelle envoyer la demande. WordPress a une URL spécifique qui traite les requêtes AJAX, donnée par admin_url ('admin-ajax.php'). Cela nous donne l'URL côté serveur - mais nous le voulons dans notre fichier javascript. Cela peut être fait en utilisant wp_localize_script. Cette fonction visait initialement à aider à la localisation, mais nous pouvons la réutiliser pour notre usage. Mettez ceci immédiatement après avoir enregistré le javascript personnalisé mon_recherche à l'étape 1:
wp_localize_script ('my_acsearch', 'MyAcSearch', array ('url' => admin_url ('admin-ajax.php')); Ceci définit un objet MyAcSearch qui a une propriété 'url'. Une telle méthode vous permet d’envoyer les paramètres stockés dans la base de données au fichier javascript, mais pour nos besoins nous avons seulement besoin de MyAcSearch.url qui est l'URL pour diriger notre demande AJAX.
La fonction de saisie semi-automatique de jQuery comporte de nombreuses fonctionnalités, mais nous allons nous en tenir à l'essentiel. Vous pouvez voir toutes ses fonctionnalités sur la page de démonstration. Les données que nous envoyons à l'URL AJAX incluront une variable d'action dont la valeur correspond à l'identificateur d'action défini à l'étape 1. Dans notre cas, il s'agit de myprefix_autocompletesearch. Donc, maintenant dans notre fichier javascript, ajoutez ce qui suit.
var acs_action = 'myprefix_autocompletesearch';
Cela nous permet d'identifier la demande, d'effectuer la recherche et de renvoyer les résultats. Ensuite, nous appliquons la fonction de saisie semi-automatique au formulaire de recherche (nous utilisons ici l'attribut ID de l'entrée de formulaire):
$ ("# s"). autocomplete (source: fonction (req, réponse) $ .getJSON (MyAcSearch.url + '? callback =? & action =' + acs_action, req, réponse);, sélectionnez: fonction (événement , ui) window.location.href = ui.item.link;, minLength: 3,); La fonction source doit renvoyer un tableau d'objets. Chaque objet doit avoir la propriété 'étiquette'(à afficher dans la liste de suggestions), et nous ajouterons la propriété'lien', l'URL du message. La fonction de sélection est activée lorsqu'un utilisateur clique sur l'une des suggestions. Dans cet exemple, cliquer sur la suggestion vous amène à cette page. le Longueur minimale indique le nombre de caractères que l'utilisateur doit taper avant que la saisie semi-automatique ne démarre.
Nous allons envelopper tout cela dans un .prêt gestionnaire, il est donc exécuté uniquement lorsque la page est complètement chargée. Alors le javascript complet est:
jQuery (document) .ready (function ($) var acs_action = 'myprefix_autocompletesearch'; $ ("# s"). autocomplete (source: function (demande, réponse) $ .getJSON (MyAcSearch.url + '? callback = ? & action = '+ acs_action, req, response);, sélectionnez: function (événement, ui) window.location.href = ui.item.link;, minLength: 3,);); Chaque fois que le formulaire de recherche est affiché à l'aide de la touche get_search_form (); fonction, notre fonction myprefix_autocomplete_search_form va tirer. Dans cette fonction, nous mettons en file d'attente les scripts et les styles dont nous avons besoin pour la saisie semi-automatique. Nous n'avons pas besoin de charger jQuery ou Autocomplete directement, WordPress sait déjà que nous en avons besoin et le gérera pour nous..
fonction myprefix_autocomplete_search_form () wp_enqueue_script ('my_acsearch'); wp_enqueue_style ('myprefix-jquery-ui'); Il ne reste plus qu'à gérer la demande AJAX.
Rappelons que dans notre myprefix_autocomplete_init fonction nous avons appelé quelque chose comme ce qui suit:
add_action ('wp_ajax_ action', 'ma_hooked_function'); add_action ('wp_ajax_nopriv_ action', 'ma_hooked_function'); La première action est déclenchée lorsque WordPress reçoit une demande AJAX avec une action donnée par action et l'utilisateur est connecté. Le second est déclenché lorsque l'utilisateur n'est pas connecté. Cela peut être particulièrement utile si vous souhaitez uniquement traiter une demande AJAX si l'utilisateur est connecté. Nous souhaitons que cela fonctionne dans les deux cas. utilisateurs connectés et non-connectés, nous ajoutons donc notre fonction aux deux. Ici, nous définissons cette fonction de rappel, encore une fois cela va dans votre functions.php:
function myprefix_autocomplete_suggestions () // Requête de suggestions $ posts = get_posts (array ('s' => $ _ REQUEST ['terme'],)); // Initialisation des suggestions array $ suggestions = array (); global $ post; foreach ($ posts as $ post): setup_postdata ($ post); // Initialisation du tableau de suggestions $ suggestion = array (); $ suggestion ['label'] = esc_html ($ post-> post_title); $ suggestion ['link'] = get_permalink (); // Ajoute une suggestion au tableau de suggestions $ suggestions [] = $ suggestion; fin de chaque // code JSON et echo $ response = $ _GET ["callback"]. "(". json_encode ($ suggestions). ")"; echo $ réponse; // N'oublie pas de sortir! sortie; Passons en revue ceci un peu à la fois. L'entrée saisie par l'utilisateur est envoyée avec la demande AJAX et est donnée par $ _REQUEST ['term']. Nous utilisons simplement get_posts'attribut de recherche pour rechercher nos publications avec ce terme.
Nous examinons ensuite chacun des messages retournés et pour chacun d'entre eux, nous construisons un tableau de suggestions. Ce tableau contient le titre de l'article (nous l'appelons 'étiquette'Autocomplete le reconnaîtra et l'utilisera pour la liste de suggestions) ainsi que le lien permanent pour l'article, de sorte que cliquer sur un article dirige l'utilisateur vers cette page. Nous ajoutons chaque tableau de suggestions à un tableau de suggestions.
Ensuite, nous JSON encodons les suggestions et renvoyons le résultat. Enfin, nous sortons! Et nous avons fini!
Dites-nous ce que vous pensez dans les commentaires, et si vous avez des suggestions sur la manière de les étendre, nous aimerions que vous les partagiez également..
