{"id":233348,"date":"2023-02-12T12:47:00","date_gmt":"2023-02-12T09:47:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233348"},"modified":"2023-02-16T16:17:23","modified_gmt":"2023-02-16T13:17:23","slug":"hacer-una-busqueda-de-autocompletar-en-wordpress-con-codigo","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/hacer-una-busqueda-de-autocompletar-en-wordpress-con-codigo\/","title":{"rendered":"Hacer una b\u00fasqueda de Autocompletar en WordPress con c\u00f3digo"},"content":{"rendered":"\n<p>Este tutorial es para usted que desea implementar una b\u00fasqueda de autocompletar en WordPress, donde tenemos el control total de las coincidencias devueltas.<\/p>\n<p>Aplicaremos un autocompletado a la b\u00fasqueda est\u00e1ndar de WordPress, pero el c\u00f3digo es muy flexible para que pueda personalizar la consulta seg\u00fan sus necesidades. Ya sea una consulta m\u00e1s espec\u00edfica por un tipo de publicaci\u00f3n personalizada, publicaci\u00f3n meta, categor\u00edas o consultas sobre un tipo de contenido completamente diferente, como usuarios o algo manual de la base de datos. Tambi\u00e9n puede aplicar f\u00e1cilmente el autocompletado en una entrada de b\u00fasqueda personalizada en lugar de la b\u00fasqueda est\u00e1ndar de WordPress.<\/p>\n<h2>que haremos<\/h2>\n<p>Autocompletar es un cuadro de interfaz de usuario que aparece debajo del campo de b\u00fasqueda y muestra las coincidencias mientras escribe. Al hacer clic en una coincidencia, el navegador lo enviar\u00e1 al enlace permanente de esa publicaci\u00f3n. Esto proporciona al usuario final una forma m\u00e1s r\u00e1pida de navegar por su contenido, ya que no necesitar\u00e1 tomar un desv\u00edo adicional a su p\u00e1gina de resultados de b\u00fasqueda. Usaremos AJAX para actualizar continuamente las coincidencias mientras el usuario escribe.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153844-61e51414137d1.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153844-61e51414137d1.png\" alt=\"Hacer una b\u00fasqueda de Autocompletar en WordPress con c\u00f3digo\"><\/a><\/p>\n<p>El autocompletado se genera con la ayuda de <a href=\"https:\/\/jqueryui.com\/autocomplete\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">jQuery UI Autocompletar<\/a>, un script que se incluye en WordPress por defecto.<\/p>\n<h2>Configurando el c\u00f3digo<\/h2>\n<p>Deber\u00e1 agregar el c\u00f3digo en el <code>functions.php<\/code>archivo PHP del tema o en un complemento activo. Este tutorial se basa en agregarlo en un tema. Ajuste las rutas para que se ajusten a su proyecto.<\/p>\n<p>El primer paso es crear un archivo Javascript que contendr\u00e1 nuestro c\u00f3digo para activar el autocompletado. En cuanto a este tutorial, crear\u00e9 un <code>autocomplete.js<\/code>archivo vac\u00edo en la carpeta de mi tema <code>assets\/js\/<\/code>. El lugar donde coloque su archivo depende de usted, solo recuerde ajustar las rutas a continuaci\u00f3n. Volveremos a este archivo despu\u00e9s de haberlo puesto en cola correctamente en WordPress.<\/p>\n<h3>Encolar scripts y estilos<\/h3>\n<p>Necesitamos poner en cola nuestro archivo Javascript de autocompletar y tambi\u00e9n debemos asegurarnos de poner en cola jQuery y jQuery UI Autocompletar. Adem\u00e1s, WordPress no incluye ning\u00fan estilo para las bibliotecas de jQuery UI, por lo que tambi\u00e9n debemos poner en cola una hoja de estilo para jQuery UI de Google CDN. Esto es opcional, por supuesto. Puede agregar el CSS de alguna otra manera o tal vez prefiera dise\u00f1arlo usted mismo.<\/p>\n<p>Pondremos en cola todos los scripts y estilos en una funci\u00f3n vinculada a <code>wp_enqueue_scripts<\/code>:<\/p>\n<pre><code>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<p>La <code>[wp_enqueue_script](https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_script\/)()<\/code>llamada a la funci\u00f3n anterior agregar\u00e1 nuestro archivo Javascript reci\u00e9n creado con las dependencias correctas (la matriz como tercer par\u00e1metro). Esto asegura que WordPress agregue los scripts jQuery y jQuery UI Autocompletar en nuestra instancia de WordPress.<\/p>\n<p>A continuaci\u00f3n, debemos proporcionar algunas variables a las que podemos acceder desde nuestro script de autocompletar. Necesitamos saber la URL de AJAX y tambi\u00e9n queremos agregar un <a href=\"https:\/\/codex.wordpress.org\/WordPress_Nonces\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">nonce<\/a> por seguridad. Podemos hacer esto usando <code>[wp_localize_script](https:\/\/developer.wordpress.org\/reference\/functions\/wp_localize_script\/)()<\/code>:<\/p>\n<pre><code>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' =&gt; admin_url('admin-ajax.php'),\n        'ajax_nonce' =&gt; wp_create_nonce('autocompleteSearchNonce')\n    ]);\n});<\/code><\/pre>\n<p>La <code>wp_localize_script()<\/code>funci\u00f3n crear\u00e1 una variable Javascript global <code>AutocompleteSearch<\/code>con dos propiedades; <code>ajax_url<\/code>y <code>ajax_nonce<\/code>. Con esto podemos, en nuestro archivo Javascript de autocompletar, obtener, por ejemplo, el valor de la URL AJAX de WordPress con <code>AutocompleteSearch.ajax_url<\/code>.<\/p>\n<p>Finalmente, necesitamos agregar algo de estilo. Como se mencion\u00f3, WordPress no viene con ning\u00fan estilo jQuery UI incluido, por lo que debemos agregar algunos nosotros mismos. Opt\u00e9 por agregar una hoja de estilo a trav\u00e9s de <a href=\"https:\/\/developers.google.com\/speed\/libraries\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Google CDN<\/a>. Pero necesitamos saber el n\u00famero de versi\u00f3n de jQuery UI para obtener su hoja de estilo. Podr\u00edamos codificar un n\u00famero de versi\u00f3n, pero no soy partidario de codificar nada. A continuaci\u00f3n, encontrar\u00e1 un buen truco para aprovechar la informaci\u00f3n de la versi\u00f3n de jQuery UI almacenada en WordPress.<\/p>\n<pre><code>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-&gt;registered['jquery-ui-autocomplete']-&gt;ver. '\/themes\/smoothness\/jquery-ui.css',\n        false, null, false\n    );\n});<\/code><\/pre>\n<p>Usamos <code>[wp_enqueue_style](https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_style\/)()<\/code>para registrar y agregar una nueva hoja de estilo con la ruta CDN proporcionada como segundo argumento. Para obtener un n\u00famero de versi\u00f3n de jQuery UI v\u00e1lido, usamos la informaci\u00f3n proporcionada por la funci\u00f3n <code>[wp_scripts](https:\/\/developer.wordpress.org\/reference\/functions\/wp_scripts\/)()<\/code>.<\/p>\n<p>\u00a1Y eso es todo lo que necesitamos para poner en cola los scripts!<\/p>\n<h3>Escribiendo el Javascript de autocompletar<\/h3>\n<p>Volvamos a nuestro <code>autocomplete.js<\/code>archivo. Sabemos que cuando se carga este script, jQuery y jQuery UI Autocompletar ya est\u00e1n cargados, y tambi\u00e9n tenemos acceso a una variable global con la informaci\u00f3n necesaria. Comencemos configurando una funci\u00f3n lista para documentos jQuery para garantizar que nuestro c\u00f3digo se ejecute despu\u00e9s de que DOM est\u00e9 listo.<\/p>\n<pre><code>jQuery(function($) {\n    \/\/ All code in here\n});<\/code><\/pre>\n<p>Si nos referimos a la documentaci\u00f3n de <a href=\"https:\/\/jqueryui.com\/autocomplete\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">jQuery UI Autocompletar,<\/a> aprendemos que necesitamos hacer un selector de jQuery dirigido a un campo de entrada y ejecutar la funci\u00f3n <code>autocomplete()<\/code>en \u00e9l.<\/p>\n<p>Este es un punto en el que puede modificar el c\u00f3digo para que se ajuste a sus necesidades. Este tutorial aplicar\u00e1 el autocompletado en el campo de b\u00fasqueda est\u00e1ndar de WordPress (que generalmente se agrega en el tema al incluir la plantilla de b\u00fasqueda o como un widget). Los nombres de clase de la entrada de b\u00fasqueda pueden variar de un tema a otro. Pero es posible que desee apuntar a un campo de entrada personalizado o buscar dentro de una plantilla especial. Todo lo que necesita hacer es cambiar el selector de jQuery para apuntar a la entrada que desea.<\/p>\n<p>En mi tema, la entrada del campo de b\u00fasqueda est\u00e1ndar de WordPress tiene una clase de <code>.search-field<\/code>. Tambi\u00e9n estoy agregando el nombre de la clase del formulario principal para reducirlo a\u00fan m\u00e1s, de modo que no corramos el riesgo de que se aplique el autocompletado a otra cosa que use la misma clase.<\/p>\n<p>De acuerdo con la documentaci\u00f3n de Autocompletar, podemos realizar una llamada AJAX en la propiedad <code>source<\/code>(que debe devolver una matriz de elementos para mostrar en la funci\u00f3n de autocompletar). Usaremos <a href=\"https:\/\/api.jquery.com\/jquery.ajax\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">la funci\u00f3n Ajax de jQuery<\/a> para hacer precisamente eso:<\/p>\n<pre><code>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<p>En la l\u00ednea <code>#2<\/code>es donde le decimos a jQuery UI Autocompletar en qu\u00e9 campo de entrada queremos aplicar la funci\u00f3n de autocompletar. Cambie este selector para que se ajuste a sus necesidades.<\/p>\n<p>En la forma m\u00e1s simple, Autocompletar espera una matriz de objetos de elementos para la <code>source<\/code>propiedad. Aqu\u00ed creamos una funci\u00f3n con dos par\u00e1metros; <code>request<\/code>contiene informaci\u00f3n sobre nuestro valor ingresado (<code>request.term<\/code>), y <code>response<\/code>cu\u00e1l es una funci\u00f3n de devoluci\u00f3n de llamada que debemos llamar y proporcionar los datos. Eso es lo que hacemos en la <code>success<\/code>funci\u00f3n de AJAX en la l\u00ednea <code>#13<\/code>.<\/p>\n<p>La llamada AJAX en s\u00ed es bastante est\u00e1ndar. Definimos el tipo de datos como JSON; esto es importante, de lo contrario jQuery UI Autocompletar no podr\u00e1 analizar los resultados. A medida <code>url<\/code>que accedemos <code>ajax_url<\/code>a la variable global que localizamos en nuestro script anteriormente; <code>AutocompleteSearch<\/code>. Y como <code>data<\/code>pasamos un objeto de informaci\u00f3n. La <code>action<\/code>propiedad es obligatoria y necesaria para el siguiente paso, que es identificar esta solicitud espec\u00edfica de AJAX en PHP. Tambi\u00e9n pasamos el t\u00e9rmino ingresado en la entrada y el nonce por motivos de seguridad.<\/p>\n<p>Eso es todo por la <code>sources<\/code>propiedad. Hay otra cosa que debemos agregar en nuestro script de autocompletar. De forma predeterminada en jQuery UI Autocompletar, al elegir un elemento, simplemente se autocompleta la entrada con el elemento elegido. Queremos redirigir al usuario a la URL de la publicaci\u00f3n al elegir un elemento de la lista. Entonces agregamos una funci\u00f3n a la <code>select<\/code>propiedad:<\/p>\n<pre><code>                ...\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<p>En la matriz de elementos que devolveremos de nuestra llamada AJAX (lo escribiremos a continuaci\u00f3n), cada elemento es un objeto con propiedades. Agregaremos una <code>link<\/code>propiedad personalizada a cada elemento (<code>ui.item<\/code>) que contendr\u00e1 los enlaces permanentes a cada publicaci\u00f3n. Pasamos esta URL a <code>[window.location.href](https:\/\/www.w3schools.com\/js\/js_window_location.asp)<\/code>la que se activar\u00e1 una redirecci\u00f3n del navegador.<\/p>\n<p>\u00a1Y eso es todo por la parte de Javascript! Todo lo que queda es escribir la parte de PHP que escucha las solicitudes de AJAX con la acci\u00f3n <code>autocompleteSearch<\/code>.<\/p>\n<h3>Devolviendo resultados en PHP a solicitudes AJAX<\/h3>\n<p>Para escribir funciones que respondan a solicitudes espec\u00edficas de AJAX, usamos los ganchos <code>wp_ajax_{action}<\/code>(visitantes registrados) y <code>wp_ajax_nopriv_{action}<\/code>(visitantes no registrados). Definimos la acci\u00f3n como <code>autocompleteSearch<\/code>en nuestra solicitud AJAX anterior. Consulte mi <a href=\"https:\/\/wordpress.mediadoma.com\/es\/guia-como-usar-correctamente-ajax-en-wordpress\/\" title=\"publicaci\u00f3n que explica c\u00f3mo funciona AJAX en WordPress\">publicaci\u00f3n que explica c\u00f3mo funciona AJAX en WordPress<\/a> si no est\u00e1 familiarizado con esto.<\/p>\n<p>Configuremos esto en <code>functions.php<\/code>(o donde sea que agregue su c\u00f3digo en PHP):<\/p>\n<pre><code>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<p>Con el c\u00f3digo anterior, enganchamos la misma funci\u00f3n a los dos ganchos AJAX. En todas las funciones que est\u00e1n enganchadas a los ganchos wp_ajax AJAX, debemos asegurarnos de hacerlo siempre <code>die()<\/code>o <code>exit<\/code>al final para no generar un eco de salida no deseado. Estoy usando la <code>[wp_die](https:\/\/developer.wordpress.org\/reference\/functions\/wp_die\/)()<\/code>funci\u00f3n de WordPress.<\/p>\n<p>Podemos obtener los datos pasados \u200b\u200b\u200b\u200bde Javascript usando <code>$_REQUEST<\/code>(funciona para solicitudes GET y POST). En nuestro c\u00f3digo Javascript pasamos el t\u00e9rmino ingresado en la clave &#8216; <code>term<\/code>&#8216;. Esto significa que podemos obtener su valor en <code>$_REQUEST['term']<\/code>. Entonces podemos realizar una consulta basada en esto. Recuerde que solo queremos devolver resultados que coincidan con este t\u00e9rmino de b\u00fasqueda.<\/p>\n<p>Este es otro punto en el que puede cambiar y modificar completamente el c\u00f3digo para que se ajuste a sus necesidades. Este tutorial realizar\u00e1 una consulta est\u00e1ndar en publicaciones y p\u00e1ginas, pero puede modificar la consulta o realizar una consulta completamente diferente en datos diferentes. Quiz\u00e1s prefiera o necesite realizar una consulta SQL manual en su lugar (ciertamente es m\u00e1s eficiente en memoria). La parte crucial aqu\u00ed es la matriz que hacemos eco al final, que es analizada por el c\u00f3digo de autocompletar de nuestro Javascript.<\/p>\n<pre><code>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' =&gt; $search_term,\n        'posts_per_page' =&gt; -1,\n    ]);\n    if ($query-&gt;have_posts()) {\n        while ($query-&gt;have_posts()) {\n            $query-&gt;the_post();\n            $suggestions[] = [\n                'id' =&gt; get_the_ID(),\n                'label' =&gt; get_the_title(),\n                'link' =&gt; get_the_permalink()\n            ];\n        }\n        wp_reset_postdata();\n    }\n    echo json_encode($suggestions);\n    wp_die();\n}<\/code><\/pre>\n<p>Primero verificamos si el nonce era v\u00e1lido para establecer cierta seguridad en nuestras llamadas AJAX. Podemos hacer esto llamando a la funci\u00f3n <code>[check_ajax_referer](https:\/\/developer.wordpress.org\/reference\/functions\/check_ajax_referer\/)()<\/code>. Tambi\u00e9n agregu\u00e9 c\u00f3digo para garantizar que no realicemos una solicitud pesada si el t\u00e9rmino de b\u00fasqueda devuelto estaba vac\u00edo. Luego deber\u00edamos devolver una matriz codificada en json vac\u00eda.<\/p>\n<p>El c\u00f3digo de ejemplo anterior realiza <code>[WP_Query](https:\/\/developer.wordpress.org\/reference\/classes\/wp_query\/)<\/code>una b\u00fasqueda en el t\u00e9rmino ingresado. Necesitamos establecer <code>posts_per_page<\/code>como <code>-1<\/code>para asegurarnos de devolver todos los partidos. Consulte la documentaci\u00f3n <code>WP_Query<\/code>si desea modificar a\u00fan m\u00e1s la consulta.<\/p>\n<p>Luego recorremos los resultados (l\u00ednea <code>#17<\/code>) y completamos una matriz con coincidencias (l\u00ednea <code>#19-23<\/code>). jQuery UI Autocompletar necesita como m\u00ednimo la propiedad <code>label<\/code>para indicar lo que debe mostrarse en el cuadro de autocompletar. Tambi\u00e9n pasamos enlaces permanentes en la clave &#8216; <code>link<\/code>&#8216; que es lo que usamos en nuestro c\u00f3digo Javascript para redirigir al usuario.<\/p>\n<p>Finalmente, en la l\u00ednea <code>#27<\/code>, hacemos eco de la matriz generada como JSON usando <code>[json_encode](https:\/\/www.php.net\/manual\/en\/function.json-encode.php)()<\/code>.<\/p>\n<p>Con esta parte de PHP en su lugar, nuestro autocompletado deber\u00eda funcionar. \u00a1Actualiza tu sitio y pru\u00e9balo!<\/p>\n<h2>Mejoras opcionales<\/h2>\n<p>Un problema com\u00fan es que la cantidad de coincidencias es demasiada y el cuadro de autocompletar se vuelve demasiado grande. Hay dos soluciones para esto.<\/p>\n<p>Una soluci\u00f3n es agregar la propiedad <code>minLength<\/code>a la <code>autocomplete()<\/code>funci\u00f3n en Javascript. Esta propiedad solo activar\u00e1 el cuadro de autocompletar despu\u00e9s de que se haya ingresado una cierta cantidad de caracteres. Como ejemplo, podemos requerir un m\u00ednimo de 3 caracteres antes de activar la funci\u00f3n de autocompletar:<\/p>\n<pre><code>        ...\n        select: function(event, ui) {\n            window.location.href = ui.item.link;\n        },\n        minLength: 3,\n    });\n});<\/code><\/pre>\n<p>jQuery UI Autocompletar propone <a href=\"https:\/\/jqueryui.com\/autocomplete\/#maxheight\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">aqu\u00ed otra soluci\u00f3n<\/a>. Muestra un ejemplo de c\u00f3mo agregar un poco de CSS para agregar una altura fija y una barra de desplazamiento interna en el cuadro de autocompletar.<\/p>\n<h2>Conclusi\u00f3n y c\u00f3digo completo.<\/h2>\n<p>Hemos agregado con \u00e9xito una funci\u00f3n de autocompletar a la funci\u00f3n de b\u00fasqueda de WordPress donde tenemos control total de las coincidencias para devolver. Brinda a los visitantes una forma m\u00e1s r\u00e1pida de navegar por su contenido, ya que al hacer clic en una coincidencia se redirigir\u00e1 directamente a la publicaci\u00f3n, en lugar de desviarse primero en una p\u00e1gina de resultados de b\u00fasqueda. Es posible que implementar un autocompletado no siempre tenga sentido en todos los sitios de WordPress, \u00a1pero puede ser excelente para buscar contenido espec\u00edfico o dentro de plantillas especiales!<\/p>\n<p>Aqu\u00ed est\u00e1 el c\u00f3digo final en su totalidad:<\/p>\n<pre><code>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' =&gt; admin_url('admin-ajax.php'),\n        'ajax_nonce' =&gt; 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-&gt;registered['jquery-ui-autocomplete']-&gt;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' =&gt; $search_term,\n        'posts_per_page' =&gt; -1,\n    ]);\n    if ($query-&gt;have_posts()) {\n        while ($query-&gt;have_posts()) {\n            $query-&gt;the_post();\n            $suggestions[] = [\n                'id' =&gt; get_the_ID(),\n                'label' =&gt; get_the_title(),\n                'link' =&gt; get_the_permalink()\n            ];\n        }\n        wp_reset_postdata();\n    }\n    echo json_encode($suggestions);\n    wp_die();\n}<\/code><\/pre>\n<pre><code>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<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fuente de grabaci\u00f3n:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/awhitepixel.com\" class=\"external external_icon\">awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Este tutorial es para usted que desea implementar una b\u00fasqueda de autocompletar en WordPress, donde tenemos el control total de las coincidencias devueltas.<\/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":[892,892,716,716,831,1110,800,800,831,840,840,861,861],"tags":[1172],"class_list":["post-233348","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo","category-desarrollador","category-guia-para-principiantes","category-n-a","category-php-2","category-tutoriales","category-wordpress-2","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/233348","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/comments?post=233348"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/233348\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/224845"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=233348"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=233348"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=233348"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}