{"id":234204,"date":"2023-02-12T12:49:00","date_gmt":"2023-02-12T09:49:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=234204"},"modified":"2023-02-16T17:06:58","modified_gmt":"2023-02-16T14:06:58","slug":"faire-une-recherche-semi-automatique-dans-wordpress-avec-du-code","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/faire-une-recherche-semi-automatique-dans-wordpress-avec-du-code\/","title":{"rendered":"Faire une recherche semi-automatique dans WordPress avec du code"},"content":{"rendered":"\n

Ce tutoriel est pour vous qui souhaitez impl\u00e9menter une recherche semi-automatique dans WordPress, o\u00f9 nous contr\u00f4lons totalement les correspondances renvoy\u00e9es.<\/p>\n

Nous appliquerons une saisie semi-automatique \u00e0 la recherche WordPress standard, mais le code est tr\u00e8s flexible afin que vous puissiez personnaliser la requ\u00eate selon vos besoins. Qu’il s’agisse d’une requ\u00eate plus sp\u00e9cifique par un type de publication personnalis\u00e9, une m\u00e9ta de publication, des cat\u00e9gories ou des requ\u00eates sur un type de contenu compl\u00e8tement diff\u00e9rent, tel que des utilisateurs ou quelque chose de manuel \u00e0 partir de la base de donn\u00e9es. Vous pouvez \u00e9galement appliquer facilement la saisie semi-automatique sur une entr\u00e9e de recherche personnalis\u00e9e au lieu de la recherche WordPress standard.<\/p>\n

Ce que nous ferons<\/h2>\n

La saisie semi-automatique est une zone d’interface utilisateur qui appara\u00eet sous le champ de recherche et affiche les correspondances pendant que vous tapez. En cliquant sur une correspondance, le navigateur vous enverra au lien permanent de cette publication. Cela offre \u00e0 l’utilisateur final un moyen plus rapide de naviguer dans votre contenu puisqu’il n’aura pas besoin de faire un d\u00e9tour suppl\u00e9mentaire vers votre page de r\u00e9sultats de recherche. Nous utiliserons AJAX pour mettre \u00e0 jour en continu les correspondances pendant que l’utilisateur tape.<\/p>\n

\"Faire<\/a><\/p>\n

La saisie semi-automatique est g\u00e9n\u00e9r\u00e9e \u00e0 l’aide de jQuery UI Autocomplete<\/a>, un script inclus dans WordPress par d\u00e9faut.<\/p>\n

Configuration du code<\/h2>\n

Vous devrez ajouter le code dans le functions.php<\/code>fichier PHP du th\u00e8me ou d’un plug-in actif. Ce tutoriel est bas\u00e9 sur son ajout dans un th\u00e8me. Ajustez les chemins en fonction de votre projet.<\/p>\n

La premi\u00e8re \u00e9tape consiste \u00e0 cr\u00e9er un fichier Javascript qui contiendra notre code pour d\u00e9clencher la saisie semi-automatique. En ce qui concerne ce tutoriel, je vais cr\u00e9er un fichier vide autocomplete.js<\/code>dans le dossier de mon th\u00e8me assets\/js\/<\/code>. L’endroit o\u00f9 vous placez votre fichier d\u00e9pend de vous, n’oubliez pas d’ajuster les chemins ci-dessous. Nous reviendrons sur ce fichier apr\u00e8s l’avoir correctement mis en file d’attente dans WordPress.<\/p>\n

Mise en file d’attente des scripts et des styles<\/h3>\n

Nous devons mettre en file d’attente notre fichier Javascript de saisie semi-automatique et nous devons \u00e9galement nous assurer de mettre en file d’attente jQuery et jQuery UI Autocomplete. De plus, WordPress n’inclut aucun style pour les biblioth\u00e8ques jQuery UI, nous devons donc \u00e9galement mettre en file d’attente une feuille de style pour jQuery UI \u00e0 partir de Google CDN. Ceci est facultatif bien s\u00fbr. Vous pouvez ajouter le CSS d’une autre mani\u00e8re ou peut-\u00eatre pr\u00e9f\u00e9rez-vous le styler vous-m\u00eame.<\/p>\n

Nous mettrons en file d’attente tous les scripts et styles dans une fonction accroch\u00e9e \u00e0wp_enqueue_scripts<\/code>\u00a0:<\/p>\n

add_action('wp_enqueue_scripts', function() {\n    wp_enqueue_script('autocomplete-search', get_stylesheet_directory_uri(). '\/assets\/js\/autocomplete.js', \n        ['jquery', 'jquery-ui-autocomplete'], null, true);\n});<\/code><\/pre>\n
L’ [wp_enqueue_script](https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_script\/)()<\/code>appel de fonction ci-dessus ajoutera notre fichier Javascript nouvellement cr\u00e9\u00e9 avec les d\u00e9pendances correctes (le tableau en troisi\u00e8me param\u00e8tre). Cela garantit que WordPress ajoute les scripts jQuery et jQuery UI Autocomplete dans notre instance WordPress.<\/p>\n
Ensuite, nous devons fournir des variables auxquelles nous pouvons acc\u00e9der \u00e0 partir de notre script de saisie semi-automatique. Nous avons besoin de conna\u00eetre l’URL AJAX et nous voulons \u00e9galement ajouter un nonce<\/a> pour la s\u00e9curit\u00e9. Nous pouvons le faire en utilisant [wp_localize_script](https:\/\/developer.wordpress.org\/reference\/functions\/wp_localize_script\/)()<\/code>:<\/p>\n
add_action('wp_enqueue_scripts', function() {\n    wp_enqueue_script('autocomplete-search', get_stylesheet_directory_uri(). '\/assets\/js\/autocomplete.js', \n        ['jquery', 'jquery-ui-autocomplete'], null, true);\n    wp_localize_script('autocomplete-search', 'AutocompleteSearch', [\n        'ajax_url' => admin_url('admin-ajax.php'),\n        'ajax_nonce' => wp_create_nonce('autocompleteSearchNonce')\n    ]);\n});<\/code><\/pre>\n
La wp_localize_script()<\/code>fonction cr\u00e9era une variable Javascript globale AutocompleteSearch<\/code>avec deux propri\u00e9t\u00e9s\u00a0; ajax_url<\/code>et ajax_nonce<\/code>. Avec cela, nous pouvons dans notre fichier Javascript autocompl\u00e9ter r\u00e9cup\u00e9rer par exemple la valeur de l’URL WordPress AJAX avec AutocompleteSearch.ajax_url<\/code>.<\/p>\n
Enfin, nous devons ajouter un peu de style. Comme mentionn\u00e9, WordPress n’inclut aucun style d’interface utilisateur jQuery, nous devons donc en ajouter nous-m\u00eames. J’ai opt\u00e9 pour l’ajout d’une feuille de style via Google CDN<\/a>. Mais nous avons besoin de conna\u00eetre le num\u00e9ro de version de jQuery UI pour r\u00e9cup\u00e9rer sa feuille de style. Nous pourrions coder en dur un num\u00e9ro de version, mais je ne suis pas fan du codage en dur. Vous trouverez ci-dessous une astuce int\u00e9ressante pour prendre de l’avance sur les informations de version de l’interface utilisateur de jQuery stock\u00e9es dans WordPress.<\/p>\n
add_action('wp_enqueue_scripts', function() {\n    ...\n\u00a0\n    $wp_scripts = wp_scripts();\n    wp_enqueue_style('jquery-ui-css',\n        '\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/'. $wp_scripts->registered['jquery-ui-autocomplete']->ver. '\/themes\/smoothness\/jquery-ui.css',\n        false, null, false\n    );\n});<\/code><\/pre>\n
Nous utilisons [wp_enqueue_style](https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_style\/)()<\/code>pour enregistrer et ajouter une nouvelle feuille de style avec le chemin CDN fourni comme deuxi\u00e8me argument. Afin de r\u00e9cup\u00e9rer un num\u00e9ro de version valide de l’interface utilisateur jQuery, nous utilisons les informations fournies par la fonction [wp_scripts](https:\/\/developer.wordpress.org\/reference\/functions\/wp_scripts\/)()<\/code>.<\/p>\n
Et c’est tout ce dont nous avons besoin pour mettre les scripts en file d’attente\u00a0!<\/p>\n
Ecrire le Javascript de saisie semi-automatique<\/h3>\n
Revenons \u00e0 notre autocomplete.js<\/code>dossier. Nous savons que lorsque ce script est charg\u00e9, jQuery et jQuery UI Autocomplete sont d\u00e9j\u00e0 charg\u00e9s, et nous avons \u00e9galement acc\u00e8s \u00e0 une variable globale avec les informations n\u00e9cessaires. Commen\u00e7ons par configurer une fonction de pr\u00eat de document jQuery pour nous assurer que notre code est ex\u00e9cut\u00e9 une fois que DOM est pr\u00eat.<\/p>\n
jQuery(function($) {\n    \/\/ All code in here\n});<\/code><\/pre>\n
Si nous nous r\u00e9f\u00e9rons \u00e0 la documentation de jQuery UI Autocomplete,<\/a> nous apprenons que nous devons cr\u00e9er un s\u00e9lecteur jQuery ciblant un champ de saisie et ex\u00e9cuter la fonction autocomplete()<\/code>dessus.<\/p>\n
C’est un point o\u00f9 vous pouvez modifier le code pour l’adapter \u00e0 vos besoins. Ce tutoriel appliquera la saisie semi-automatique sur le champ de recherche WordPress standard (qui est g\u00e9n\u00e9ralement ajout\u00e9 dans le th\u00e8me en incluant le mod\u00e8le de recherche ou en tant que widget). Les noms de classe de l’entr\u00e9e de recherche peuvent varier d’un th\u00e8me \u00e0 l’autre. Mais vous souhaiterez peut-\u00eatre cibler un champ de saisie personnalis\u00e9 ou effectuer une recherche dans un mod\u00e8le sp\u00e9cial. Tout ce que vous avez \u00e0 faire est de changer le s\u00e9lecteur jQuery pour cibler l’entr\u00e9e souhait\u00e9e.<\/p>\n
Dans mon th\u00e8me, l’entr\u00e9e de champ de recherche WordPress standard a une classe de .search-field<\/code>. J’ajoute \u00e9galement le nom de la classe du formulaire parent pour le r\u00e9duire davantage afin que nous ne risquions pas que la saisie semi-automatique soit appliqu\u00e9e \u00e0 quelque chose d’autre utilisant la m\u00eame classe.<\/p>\n
Selon la documentation Autocomplete, nous pouvons effectuer un appel AJAX dans la propri\u00e9t\u00e9 source<\/code>(qui doit renvoyer un tableau d’\u00e9l\u00e9ments \u00e0 afficher dans l’autocomplete). Nous utiliserons la fonction Ajax de jQuery<\/a> pour faire exactement cela\u00a0:<\/p>\n
jQuery(function($) {\n    $('.search-form .search-field').autocomplete({\n        source: function(request, response) {\n            $.ajax({\n                dataType: 'json',\n                url: AutocompleteSearch.ajax_url,\n                data: {\n                    term: request.term,\n                    action: 'autocompleteSearch',\n                    security: AutocompleteSearch.ajax_nonce,\n                },\n                success: function(data) {\n                    response(data);\n                }\n            });\n        },\n    });\n});<\/code><\/pre>\n
\u00c0 la ligne #2<\/code>, nous indiquons \u00e0 jQuery UI Autocomplete sur quel champ de saisie nous voulons appliquer la saisie semi-automatique. Modifiez ce s\u00e9lecteur selon vos besoins.<\/p>\n
Dans la forme la plus simple, Autocomplete attend un tableau d’objets d’\u00e9l\u00e9ment \u00e0 la source<\/code>propri\u00e9t\u00e9. Ici, nous cr\u00e9ons une fonction avec deux param\u00e8tres\u00a0; request<\/code>contient des informations sur notre valeur entr\u00e9e (request.term<\/code>), et response<\/code>qui est une fonction de rappel dont nous avons besoin pour appeler et fournir les donn\u00e9es. C’est ce que nous faisons dans la fonction AJAX success<\/code>\u00e0 la ligne #13<\/code>.<\/p>\n
L’appel AJAX lui-m\u00eame est assez standard. Nous d\u00e9finissons le type de donn\u00e9es comme JSON – c’est important sinon jQuery UI Autocomplete ne pourra pas analyser les r\u00e9sultats. Lorsque url<\/code>nous acc\u00e9dons ajax_url<\/code>\u00e0 la variable globale, nous avons localis\u00e9 notre script plus t\u00f4t\u00a0; AutocompleteSearch<\/code>. Et comme data<\/code>nous passons devant un objet d’information. La action<\/code>propri\u00e9t\u00e9 est obligatoire et n\u00e9cessaire pour l’\u00e9tape suivante, qui consiste \u00e0 identifier cette requ\u00eate AJAX sp\u00e9cifique en PHP. Nous transmettons \u00e9galement le terme saisi dans l’entr\u00e9e et le nonce pour des raisons de s\u00e9curit\u00e9.<\/p>\n
C’est tout pour la sources<\/code>propri\u00e9t\u00e9. Il y a une autre chose que nous devons ajouter dans notre script de saisie semi-automatique. Par d\u00e9faut, dans jQuery UI Autocomplete, le choix d’un \u00e9l\u00e9ment remplit automatiquement l’entr\u00e9e avec l’\u00e9l\u00e9ment choisi. Nous souhaitons rediriger l’utilisateur vers l’URL de la publication lors du choix d’un \u00e9l\u00e9ment dans la liste. Nous ajoutons donc une fonction \u00e0 la select<\/code>propri\u00e9t\u00e9\u00a0:<\/p>\n
                ...\n                success: function(data) {\n                    response(data);\n                }\n            });\n        },      \n        select: function(event, ui) {\n            window.location.href = ui.item.link;\n        },\n    });\n});<\/code><\/pre>\n
Dans le tableau d’\u00e9l\u00e9ments que nous reviendrons de notre appel AJAX (nous \u00e9crirons ceci ensuite), chaque \u00e9l\u00e9ment est un objet avec des propri\u00e9t\u00e9s. Nous ajouterons une link<\/code>propri\u00e9t\u00e9 personnalis\u00e9e \u00e0 chaque \u00e9l\u00e9ment (ui.item<\/code>) qui contiendra les permaliens de chaque article. Nous transmettons cette URL \u00e0 [window.location.href](https:\/\/www.w3schools.com\/js\/js_window_location.asp)<\/code>laquelle d\u00e9clenchera une redirection du navigateur.<\/p>\n
Et c’est tout pour la partie Javascript! Il ne reste plus qu’\u00e0 \u00e9crire la partie PHP qui \u00e9coute les requ\u00eates AJAX avec l’action autocompleteSearch<\/code>.<\/p>\n
Renvoi des r\u00e9sultats en PHP aux requ\u00eates AJAX<\/h3>\n
Afin d’\u00e9crire des fonctions qui r\u00e9pondent \u00e0 des requ\u00eates AJAX sp\u00e9cifiques, nous utilisons les crochets wp_ajax_{action}<\/code>(visiteurs connect\u00e9s) et wp_ajax_nopriv_{action}<\/code>(visiteurs non connect\u00e9s). Nous avons d\u00e9fini l’action comme autocompleteSearch<\/code>dans notre requ\u00eate AJAX ci-dessus. Reportez-vous \u00e0 mon article qui explique le fonctionnement d’AJAX dans WordPress<\/a> si vous n’\u00eates pas familier avec cela.<\/p>\n
Configurons cela dans functions.php<\/code>(ou n’importe o\u00f9 dans PHP o\u00f9 vous ajoutez votre code):<\/p>\n
add_action('wp_ajax_nopriv_autocompleteSearch', 'awp_autocomplete_search');\nadd_action('wp_ajax_autocompleteSearch', 'awp_autocomplete_search');\nfunction awp_autocomplete_search() {\n    \/\/ echo result\n    die();\n}<\/code><\/pre>\n
Avec le code ci-dessus, nous accrochons la m\u00eame fonction aux deux crochets AJAX. Dans toutes les fonctions qui sont accroch\u00e9es aux hooks wp_ajax AJAX, nous devons nous assurer de toujours die()<\/code>ou exit<\/code>\u00e0 la fin afin de ne pas faire \u00e9cho \u00e0 une sortie ind\u00e9sirable. J’utilise la [wp_die](https:\/\/developer.wordpress.org\/reference\/functions\/wp_die\/)()<\/code>fonction de WordPress.<\/p>\n
Nous pouvons r\u00e9cup\u00e9rer les donn\u00e9es transmises \u00e0 partir de Javascript en utilisant $_REQUEST<\/code>(fonctionne pour les requ\u00eates GET et POST). Dans notre code Javascript, nous avons pass\u00e9 le terme saisi dans la cl\u00e9 ‘ term<\/code>‘. Cela signifie que nous pouvons en r\u00e9cup\u00e9rer la valeur dans $_REQUEST['term']<\/code>. Nous pouvons ensuite effectuer une requ\u00eate bas\u00e9e sur cela. N’oubliez pas que nous souhaitons uniquement renvoyer les r\u00e9sultats correspondant \u00e0 ce terme de recherche.<\/p>\n
C’est un autre point o\u00f9 vous pouvez enti\u00e8rement modifier et ajuster le code en fonction de vos besoins. Ce didacticiel effectuera une requ\u00eate standard sur les publications et les pages, mais vous pouvez modifier la requ\u00eate ou effectuer une requ\u00eate compl\u00e8tement diff\u00e9rente sur des donn\u00e9es diff\u00e9rentes. Peut-\u00eatre pr\u00e9f\u00e9rez-vous ou avez-vous besoin d’effectuer une requ\u00eate SQL manuelle \u00e0 la place (c’est certainement plus efficace en m\u00e9moire). La partie cruciale ici est le tableau que nous renvoyons \u00e0 la fin, qui est analys\u00e9 par le code de saisie semi-automatique de notre Javascript.<\/p>\n
add_action('wp_ajax_nopriv_autocompleteSearch', 'awp_autocomplete_search');\nadd_action('wp_ajax_autocompleteSearch', 'awp_autocomplete_search');\nfunction awp_autocomplete_search() {\n    check_ajax_referer('autocompleteSearchNonce', 'security');\n    $search_term = $_REQUEST['term'];\n    if (!isset($_REQUEST['term'])) {\n        echo json_encode([]);\n    }\n    $suggestions = [];\n    $query = new WP_Query([\n        's' => $search_term,\n        'posts_per_page' => -1,\n    ]);\n    if ($query->have_posts()) {\n        while ($query->have_posts()) {\n            $query->the_post();\n            $suggestions[] = [\n                'id' => get_the_ID(),\n                'label' => get_the_title(),\n                'link' => get_the_permalink()\n            ];\n        }\n        wp_reset_postdata();\n    }\n    echo json_encode($suggestions);\n    wp_die();\n}<\/code><\/pre>\n
Nous v\u00e9rifions d’abord si le nonce \u00e9tait valide afin d’\u00e9tablir une certaine s\u00e9curit\u00e9 sur nos appels AJAX. Nous pouvons le faire en appelant la fonction [check_ajax_referer](https:\/\/developer.wordpress.org\/reference\/functions\/check_ajax_referer\/)()<\/code>. J’ai \u00e9galement ajout\u00e9 du code pour nous assurer que nous n’effectuons pas de requ\u00eate lourde si le terme de recherche renvoy\u00e9 \u00e9tait vide. Nous devrions ensuite retourner un tableau vide encod\u00e9 en json.<\/p>\n
L’exemple de code ci-dessus effectue [WP_Query](https:\/\/developer.wordpress.org\/reference\/classes\/wp_query\/)<\/code>une recherche sur le terme saisi. Nous devons nous assurer posts_per_page<\/code>que -1<\/code>nous renvoyons tous les matchs. Consultez la documentation WP_Query<\/code>si vous souhaitez affiner davantage la requ\u00eate.<\/p>\n
Nous parcourons ensuite les r\u00e9sultats (ligne #17<\/code>) et remplissons un tableau avec des correspondances (ligne #19-23<\/code>). jQuery UI Autocomplete a besoin au minimum de la propri\u00e9t\u00e9 label<\/code>pour signifier ce qui doit \u00eatre affich\u00e9 dans la bo\u00eete de saisie semi-automatique. Nous transmettons \u00e9galement les permaliens dans la cl\u00e9 ‘ link<\/code>‘ qui est ce que nous utilisons dans notre code Javascript pour rediriger l’utilisateur.<\/p>\n
Enfin, \u00e0 la ligne, #27<\/code>nous faisons \u00e9cho au tableau g\u00e9n\u00e9r\u00e9 en tant que JSON en utilisant [json_encode](https:\/\/www.php.net\/manual\/en\/function.json-encode.php)()<\/code>.<\/p>\n
Avec cette partie PHP en place, notre saisie semi-automatique devrait fonctionner\u00a0! Actualisez votre site et essayez-le !<\/p>\n
Am\u00e9liorations facultatives<\/h2>\n
Un probl\u00e8me courant est que le nombre de correspondances est trop \u00e9lev\u00e9 et que la bo\u00eete de saisie semi-automatique devient trop grande. Il existe deux solutions \u00e0 cela.<\/p>\n
Une solution consiste \u00e0 ajouter la propri\u00e9t\u00e9 minLength<\/code>\u00e0 la autocomplete()<\/code>fonction en Javascript. Cette propri\u00e9t\u00e9 ne d\u00e9clenchera la bo\u00eete de saisie semi-automatique qu’apr\u00e8s la saisie d’un certain nombre de caract\u00e8res. Par exemple, nous pouvons exiger un minimum de 3 caract\u00e8res avant de d\u00e9clencher la saisie semi-automatique\u00a0:<\/p>\n
        ...\n        select: function(event, ui) {\n            window.location.href = ui.item.link;\n        },\n        minLength: 3,\n    });\n});<\/code><\/pre>\n
jQuery UI Autocomplete propose ici une autre solution<\/a>. Il montre un exemple d’ajout d’un peu de CSS pour ajouter une hauteur fixe et une barre de d\u00e9filement interne dans la bo\u00eete de saisie semi-automatique.<\/p>\n
Conclusion et code complet<\/h2>\n
Nous avons ajout\u00e9 avec succ\u00e8s une fonction de saisie semi-automatique \u00e0 la fonctionnalit\u00e9 de recherche de WordPress o\u00f9 nous avons le contr\u00f4le total des correspondances \u00e0 renvoyer. Cela donne aux visiteurs un moyen plus rapide de naviguer dans votre contenu, car cliquer sur une correspondance redirigera directement vers la publication, plut\u00f4t que de faire d’abord un d\u00e9tour dans une page de r\u00e9sultats de recherche. La mise en \u0153uvre d’une saisie semi-automatique n’a pas toujours de sens sur tous les sites WordPress, mais peut \u00eatre id\u00e9ale pour rechercher un contenu sp\u00e9cifique ou dans des mod\u00e8les sp\u00e9ciaux !<\/p>\n
Voici le code final dans son int\u00e9gralit\u00e9 :<\/p>\n
add_action('wp_enqueue_scripts', function() {\n    wp_enqueue_script('autocomplete-search', get_stylesheet_directory_uri(). '\/assets\/js\/autocomplete.js', \n        ['jquery', 'jquery-ui-autocomplete'], null, true);\n    wp_localize_script('autocomplete-search', 'AutocompleteSearch', [\n        'ajax_url' => admin_url('admin-ajax.php'),\n        'ajax_nonce' => wp_create_nonce('autocompleteSearchNonce')\n    ]);\n\u00a0\n    $wp_scripts = wp_scripts();\n    wp_enqueue_style('jquery-ui-css',\n        '\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/'. $wp_scripts->registered['jquery-ui-autocomplete']->ver. '\/themes\/smoothness\/jquery-ui.css',\n        false, null, false\n    );\n});\n\u00a0\nadd_action('wp_ajax_nopriv_autocompleteSearch', 'awp_autocomplete_search');\nadd_action('wp_ajax_autocompleteSearch', 'awp_autocomplete_search');\nfunction awp_autocomplete_search() {\n    check_ajax_referer('autocompleteSearchNonce', 'security');\n\u00a0\n    $search_term = $_REQUEST['term'];\n    if (!isset($_REQUEST['term'])) {\n        echo json_encode([]);\n    }\n\u00a0\n    $suggestions = [];\n    $query = new WP_Query([\n        's' => $search_term,\n        'posts_per_page' => -1,\n    ]);\n    if ($query->have_posts()) {\n        while ($query->have_posts()) {\n            $query->the_post();\n            $suggestions[] = [\n                'id' => get_the_ID(),\n                'label' => get_the_title(),\n                'link' => get_the_permalink()\n            ];\n        }\n        wp_reset_postdata();\n    }\n    echo json_encode($suggestions);\n    wp_die();\n}<\/code><\/pre>\n
jQuery(function($) {\n    $('.search-form .search-field').autocomplete({\n        source: function(request, response) {\n            $.ajax({\n                dataType: 'json',\n                url: AutocompleteSearch.ajax_url,\n                data: {\n                    term: request.term,\n                    action: 'autocompleteSearch',\n                    security: AutocompleteSearch.ajax_nonce,\n                },\n                success: function(data) {\n                    response(data);\n                }\n            });\n        },\n        select: function(event, ui) {\n            window.location.href = ui.item.link;\n        },\n    });\n});<\/code><\/pre>\n
Source d’enregistrement:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Ce tutoriel est pour vous qui souhaitez impl\u00e9menter une recherche semi-automatique dans WordPress, o\u00f9 nous contr\u00f4lons totalement les correspondances renvoy\u00e9es.<\/p>\n","protected":false},"author":1,"featured_media":224845,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[893,893,717,717,832,1110,801,801,832,841,841,862,862],"tags":[1167],"class_list":["post-234204","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code-2","category-developpeur","category-guide-pour-les-debutants","category-n-a","category-php-3","category-tutoriels","category-wordpress-3","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/234204","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/comments?post=234204"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/234204\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media\/224845"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=234204"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=234204"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=234204"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}