{"id":233387,"date":"2023-02-12T12:47:00","date_gmt":"2023-02-12T09:47:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233387"},"modified":"2023-02-16T17:02:11","modified_gmt":"2023-02-16T14:02:11","slug":"fazendo-pesquisa-de-preenchimento-automatico-no-wordpress-com-codigo","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/fazendo-pesquisa-de-preenchimento-automatico-no-wordpress-com-codigo\/","title":{"rendered":"Fazendo pesquisa de preenchimento autom\u00e1tico no WordPress com c\u00f3digo"},"content":{"rendered":"\n<p>Este tutorial \u00e9 para voc\u00ea que deseja implementar uma pesquisa de preenchimento autom\u00e1tico no WordPress, onde temos total controle das correspond\u00eancias retornadas.<\/p>\n<p>Aplicaremos um preenchimento autom\u00e1tico \u00e0 pesquisa padr\u00e3o do WordPress, mas o c\u00f3digo \u00e9 altamente flex\u00edvel para que voc\u00ea possa personalizar a consulta de acordo com suas necessidades. Seja uma consulta mais espec\u00edfica por um tipo de postagem personalizado, meta de postagem, categorias ou consultas em um tipo de conte\u00fado completamente diferente, como usu\u00e1rios ou algo manual do banco de dados. Voc\u00ea tamb\u00e9m pode aplicar facilmente o preenchimento autom\u00e1tico em uma entrada de pesquisa personalizada em vez da pesquisa padr\u00e3o do WordPress.<\/p>\n<h2>O que vamos fazer<\/h2>\n<p>O preenchimento autom\u00e1tico \u00e9 uma caixa de interface do usu\u00e1rio que aparece abaixo do campo de pesquisa mostrando as correspond\u00eancias enquanto voc\u00ea digita. Ao clicar em uma correspond\u00eancia, o navegador o enviar\u00e1 para o link permanente dessa postagem. Isso fornece ao usu\u00e1rio final uma maneira mais r\u00e1pida de navegar em seu conte\u00fado, pois ele n\u00e3o precisar\u00e1 fazer o desvio extra para sua p\u00e1gina de resultados de pesquisa. Usaremos AJAX para atualizar continuamente as correspond\u00eancias enquanto o usu\u00e1rio digita.<\/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=\"Fazendo pesquisa de preenchimento autom\u00e1tico no WordPress com c\u00f3digo\"><\/a><\/p>\n<p>O preenchimento autom\u00e1tico \u00e9 gerado com a ajuda do <a href=\"https:\/\/jqueryui.com\/autocomplete\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">jQuery UI Autocomplete<\/a>, um script inclu\u00eddo no WordPress como padr\u00e3o.<\/p>\n<h2>Configurando o c\u00f3digo<\/h2>\n<p>Voc\u00ea precisar\u00e1 adicionar o c\u00f3digo no <code>functions.php<\/code>arquivo PHP do tema ou de um plugin ativo. Este tutorial \u00e9 baseado em adicion\u00e1-lo em um tema. Ajuste os caminhos para se adequar ao seu projeto.<\/p>\n<p>O primeiro passo \u00e9 criar um arquivo Javascript que conter\u00e1 nosso c\u00f3digo para acionar o preenchimento autom\u00e1tico. Quanto a este tutorial vou criar um arquivo vazio na pasta <code>autocomplete.js<\/code>do meu tema. <code>assets\/js\/<\/code>Onde voc\u00ea coloca seu arquivo fica a seu crit\u00e9rio, apenas lembre-se de ajustar os caminhos abaixo. Voltaremos a esse arquivo depois de enfileirarmos esse arquivo corretamente no WordPress.<\/p>\n<h3>Enfileiramento de scripts e estilos<\/h3>\n<p>Precisamos enfileirar nosso arquivo Javascript de preenchimento autom\u00e1tico e tamb\u00e9m precisamos nos certificar de enfileirar jQuery e jQuery UI Autocomplete. Al\u00e9m disso, o WordPress n\u00e3o inclui nenhum estilo para bibliotecas de interface do usu\u00e1rio do jQuery, portanto, tamb\u00e9m precisamos enfileirar uma folha de estilo para a interface do usu\u00e1rio do jQuery do Google CDN. Isso \u00e9 opcional, claro. Voc\u00ea pode adicionar o CSS de outra forma ou talvez prefira estiliz\u00e1-lo voc\u00ea mesmo.<\/p>\n<p>Vamos enfileirar todos os scripts e estilos em uma fun\u00e7\u00e3o ligada 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>A <code>[wp_enqueue_script](https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_script\/)()<\/code>chamada de fun\u00e7\u00e3o acima adicionar\u00e1 nosso arquivo Javascript rec\u00e9m-criado com as depend\u00eancias corretas (o array como terceiro par\u00e2metro). Isso garante que o WordPress adicione os scripts jQuery e jQuery UI Autocomplete em nossa inst\u00e2ncia do WordPress.<\/p>\n<p>Em seguida, precisamos fornecer algumas vari\u00e1veis \u200b\u200bque podemos acessar em nosso script de preenchimento autom\u00e1tico. Precisamos saber o URL AJAX e tamb\u00e9m queremos adicionar um <a href=\"https:\/\/codex.wordpress.org\/WordPress_Nonces\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">nonce<\/a> para seguran\u00e7a. Podemos fazer isso 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>A <code>wp_localize_script()<\/code>fun\u00e7\u00e3o criar\u00e1 uma vari\u00e1vel Javascript global <code>AutocompleteSearch<\/code>com duas propriedades; <code>ajax_url<\/code>e <code>ajax_nonce<\/code>. Com isso, podemos em nosso arquivo Javascript autocompletar buscar, por exemplo, o valor da URL AJAX do WordPress com <code>AutocompleteSearch.ajax_url<\/code>.<\/p>\n<p>Finalmente, precisamos adicionar algum estilo. Como mencionado, o WordPress n\u00e3o vem com nenhum estilo de interface do usu\u00e1rio jQuery inclu\u00eddo, portanto, precisamos adicionar alguns n\u00f3s mesmos. Optei por adicionar uma folha de estilo via <a href=\"https:\/\/developers.google.com\/speed\/libraries\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Google CDN<\/a>. Mas precisamos saber o n\u00famero da vers\u00e3o da interface do usu\u00e1rio do jQuery para buscar sua folha de estilo. Poder\u00edamos codificar um n\u00famero de vers\u00e3o, mas n\u00e3o sou f\u00e3 de codificar nada. Abaixo, voc\u00ea encontrar\u00e1 um bom truque para aproveitar as informa\u00e7\u00f5es da vers\u00e3o do jQuery UI armazenadas no 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 e adicionar uma nova folha de estilo com o caminho CDN fornecido como segundo argumento. Para buscar um n\u00famero de vers\u00e3o de UI do jQuery v\u00e1lido, usamos as informa\u00e7\u00f5es fornecidas pela fun\u00e7\u00e3o <code>[wp_scripts](https:\/\/developer.wordpress.org\/reference\/functions\/wp_scripts\/)()<\/code>.<\/p>\n<p>E isso \u00e9 tudo que precisamos para enfileirar scripts!<\/p>\n<h3>Escrevendo o Javascript de preenchimento autom\u00e1tico<\/h3>\n<p>Vamos voltar ao nosso <code>autocomplete.js<\/code>arquivo. Sabemos que quando este script \u00e9 carregado, jQuery e jQuery UI Autocomplete j\u00e1 est\u00e3o carregados, e tamb\u00e9m temos acesso a uma vari\u00e1vel global com as informa\u00e7\u00f5es necess\u00e1rias. Vamos come\u00e7ar configurando uma fun\u00e7\u00e3o pronta de documento jQuery para garantir que nosso c\u00f3digo seja executado depois que o DOM estiver pronto.<\/p>\n<pre><code>jQuery(function($) {\n    \/\/ All code in here\n});<\/code><\/pre>\n<p>Se nos referirmos \u00e0 documenta\u00e7\u00e3o do <a href=\"https:\/\/jqueryui.com\/autocomplete\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">jQuery UI Autocomplete<\/a>, aprendemos que precisamos fazer um seletor jQuery visando um campo de entrada e executar a fun\u00e7\u00e3o <code>autocomplete()<\/code>nele.<\/p>\n<p>Este \u00e9 um ponto em que voc\u00ea pode ajustar o c\u00f3digo para atender \u00e0s suas necessidades. Este tutorial aplicar\u00e1 o preenchimento autom\u00e1tico no campo de pesquisa padr\u00e3o do WordPress (que geralmente \u00e9 adicionado ao tema, incluindo o modelo de pesquisa ou como um widget). Os nomes de classe da entrada de pesquisa podem variar de tema para tema. Mas talvez voc\u00ea queira segmentar um campo de entrada personalizado ou pesquisar em um modelo especial. Tudo o que voc\u00ea precisa fazer \u00e9 alterar o seletor jQuery para direcionar a entrada desejada.<\/p>\n<p>No meu tema, a entrada padr\u00e3o do campo de pesquisa do WordPress tem uma classe de <code>.search-field<\/code>. Tamb\u00e9m estou adicionando o nome da classe do formul\u00e1rio pai para reduzi-lo ainda mais, para n\u00e3o corrermos o risco de o preenchimento autom\u00e1tico ser aplicado a outra coisa usando a mesma classe.<\/p>\n<p>De acordo com a documenta\u00e7\u00e3o do Autocomplete podemos realizar uma chamada AJAX na propriedade <code>source<\/code>(que deve retornar um array de itens para exibir no autocomplete). Usaremos <a href=\"https:\/\/api.jquery.com\/jquery.ajax\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">a fun\u00e7\u00e3o Ajax do jQuery<\/a> para fazer exatamente isso:<\/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>Na linha <code>#2<\/code>\u00e9 onde informamos ao jQuery UI Autocomplete em qual campo de entrada queremos aplicar o autocomplete. Altere este seletor para atender \u00e0s suas necessidades.<\/p>\n<p>Na forma mais simples, o Autocomplete espera uma matriz de objetos de item para a <code>source<\/code>propriedade. Aqui criamos uma fun\u00e7\u00e3o com dois par\u00e2metros; <code>request<\/code>cont\u00e9m informa\u00e7\u00f5es sobre nosso valor inserido (<code>request.term<\/code>), e <code>response<\/code>qual \u00e9 uma fun\u00e7\u00e3o de retorno de chamada que precisamos chamar e fornecer os dados. Isso \u00e9 o que fazemos na <code>success<\/code>fun\u00e7\u00e3o do AJAX na linha <code>#13<\/code>.<\/p>\n<p>A pr\u00f3pria chamada AJAX \u00e9 bastante padr\u00e3o. Definimos o tipo de dados como JSON \u2013 isso \u00e9 importante, caso contr\u00e1rio o jQuery UI Autocomplete n\u00e3o poder\u00e1 analisar os resultados. \u00c0 medida <code>url<\/code>que acessamos <code>ajax_url<\/code>a vari\u00e1vel global, localizamos nosso script anteriormente; <code>AutocompleteSearch<\/code>. E como <code>data<\/code>passamos um objeto de informa\u00e7\u00e3o. A <code>action<\/code>propriedade \u00e9 obrigat\u00f3ria e necess\u00e1ria para a pr\u00f3xima etapa \u2013 que \u00e9 identificar essa solicita\u00e7\u00e3o AJAX espec\u00edfica no PHP. Tamb\u00e9m passamos o termo inserido na entrada e o nonce para fins de seguran\u00e7a.<\/p>\n<p>Isso \u00e9 tudo para a <code>sources<\/code>propriedade. H\u00e1 uma outra coisa que precisamos adicionar em nosso script de preenchimento autom\u00e1tico. Como padr\u00e3o no jQuery UI Autocomplete escolher um item simplesmente preenche automaticamente a entrada com o elemento escolhido. Queremos redirecionar o usu\u00e1rio para a URL da postagem ao escolher um item da lista. Ent\u00e3o, adicionamos uma fun\u00e7\u00e3o \u00e0 <code>select<\/code>propriedade:<\/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>No array de itens que retornaremos de nossa chamada AJAX (escreveremos isso a seguir) cada item \u00e9 um objeto com propriedades. Adicionaremos uma <code>link<\/code>propriedade personalizada a cada item (<code>ui.item<\/code>) que conter\u00e1 os links permanentes para cada postagem. Passamos este URL para <code>[window.location.href](https:\/\/www.w3schools.com\/js\/js_window_location.asp)<\/code>o qual acionar\u00e1 um redirecionamento do navegador.<\/p>\n<p>E isso \u00e9 tudo para a parte de Javascript! Tudo o que resta \u00e9 escrever a parte PHP que escuta as solicita\u00e7\u00f5es AJAX com a a\u00e7\u00e3o <code>autocompleteSearch<\/code>.<\/p>\n<h3>Retornando resultados em solicita\u00e7\u00f5es PHP para AJAX<\/h3>\n<p>Para escrever fun\u00e7\u00f5es que respondem a solicita\u00e7\u00f5es AJAX espec\u00edficas, usamos os ganchos <code>wp_ajax_{action}<\/code>(visitantes logados) e <code>wp_ajax_nopriv_{action}<\/code>(visitantes n\u00e3o logados). Definimos a a\u00e7\u00e3o como <code>autocompleteSearch<\/code>em nossa solicita\u00e7\u00e3o AJAX acima. Consulte o meu <a href=\"https:\/\/wordpress.mediadoma.com\/pt-pt\/guia-como-usar-corretamente-o-ajax-no-wordpress\/\" title=\"post que explica como o AJAX funciona no WordPress\">post que explica como o AJAX funciona no WordPress<\/a> se voc\u00ea n\u00e3o estiver familiarizado com isso.<\/p>\n<p>Vamos configurar isso em <code>functions.php<\/code>(ou em qualquer lugar em PHP que voc\u00ea adicione seu c\u00f3digo):<\/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>Com o c\u00f3digo acima, conectamos a mesma fun\u00e7\u00e3o aos dois ganchos AJAX. Em todas as fun\u00e7\u00f5es que s\u00e3o conectadas aos ganchos wp_ajax AJAX, devemos ter certeza de sempre <code>die()<\/code>ou <code>exit<\/code>no final para n\u00e3o ecoar uma sa\u00edda indesejada. Estou usando a <code>[wp_die](https:\/\/developer.wordpress.org\/reference\/functions\/wp_die\/)()<\/code>fun\u00e7\u00e3o do WordPress.<\/p>\n<p>Podemos buscar os dados passados \u200b\u200bdo Javascript usando <code>$_REQUEST<\/code>(funciona para solicita\u00e7\u00f5es GET e POST). Em nosso c\u00f3digo Javascript passamos o termo inserido na chave &#8216; <code>term<\/code>&#8216;. Isso significa que podemos buscar o valor dele em <code>$_REQUEST['term']<\/code>. Podemos ent\u00e3o realizar uma consulta com base nisso. Lembre-se de que queremos retornar apenas resultados que correspondam a esse termo de pesquisa.<\/p>\n<p>Este \u00e9 outro ponto em que voc\u00ea pode alterar e ajustar totalmente o c\u00f3digo para atender \u00e0s suas necessidades. Este tutorial realizar\u00e1 uma consulta padr\u00e3o em postagens e p\u00e1ginas, mas voc\u00ea pode ajustar a consulta ou realizar uma consulta completamente diferente em dados diferentes. Talvez voc\u00ea prefira ou precise executar uma consulta SQL manual (certamente \u00e9 mais eficiente em termos de mem\u00f3ria). A parte crucial aqui \u00e9 a matriz que ecoamos no final, que \u00e9 analisada pelo c\u00f3digo de preenchimento autom\u00e1tico do nosso 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>Primeiro verificamos se o nonce era v\u00e1lido para estabelecer alguma seguran\u00e7a em nossas chamadas AJAX. Podemos fazer isso chamando a fun\u00e7\u00e3o <code>[check_ajax_referer](https:\/\/developer.wordpress.org\/reference\/functions\/check_ajax_referer\/)()<\/code>. Tamb\u00e9m adicionei c\u00f3digo para garantir que n\u00e3o realizamos uma solicita\u00e7\u00e3o pesada se o termo de pesquisa retornado estiver vazio. Devemos ent\u00e3o retornar um array codificado em json vazio.<\/p>\n<p>O c\u00f3digo de exemplo acima realiza <code>[WP_Query](https:\/\/developer.wordpress.org\/reference\/classes\/wp_query\/)<\/code>uma pesquisa no termo inserido. Precisamos definir <code>posts_per_page<\/code>como <code>-1<\/code>garantir o retorno de todas as partidas. Confira a documenta\u00e7\u00e3o <code>WP_Query<\/code>se quiser ajustar ainda mais a consulta.<\/p>\n<p>Em seguida, percorremos os resultados (line <code>#17<\/code>) e preenchemos um array com correspond\u00eancias (line <code>#19-23<\/code>). jQuery UI Autocomplete precisa, no m\u00ednimo, da propriedade <code>label<\/code>para significar o que deve ser exibido na caixa de autocomplete. Tamb\u00e9m passamos permalinks na chave &#8216; <code>link<\/code>&#8216; que \u00e9 o que usamos em nosso c\u00f3digo Javascript para redirecionar o usu\u00e1rio.<\/p>\n<p>Finalmente, na linha <code>#27<\/code>, ecoamos o array gerado como JSON usando <code>[json_encode](https:\/\/www.php.net\/manual\/en\/function.json-encode.php)()<\/code>.<\/p>\n<p>Com essa parte do PHP instalada, nosso preenchimento autom\u00e1tico deve funcionar! Atualize seu site e experimente!<\/p>\n<h2>Melhorias opcionais<\/h2>\n<p>Um problema comum \u00e9 que o n\u00famero de correspond\u00eancias \u00e9 muito grande e a caixa de preenchimento autom\u00e1tico fica muito grande. Existem duas solu\u00e7\u00f5es para isso.<\/p>\n<p>Uma solu\u00e7\u00e3o \u00e9 adicionar a propriedade <code>minLength<\/code>\u00e0 <code>autocomplete()<\/code>fun\u00e7\u00e3o em Javascript. Esta propriedade s\u00f3 acionar\u00e1 a caixa de autocompletar ap\u00f3s a entrada de um certo n\u00famero de caracteres. Como exemplo, podemos exigir um m\u00ednimo de 3 caracteres antes de acionar o preenchimento autom\u00e1tico:<\/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 Autocomplete prop\u00f5e <a href=\"https:\/\/jqueryui.com\/autocomplete\/#maxheight\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">outra solu\u00e7\u00e3o aqui<\/a>. Ele mostra um exemplo de adi\u00e7\u00e3o de um pouco de CSS para adicionar uma altura fixa e uma barra de rolagem interna na caixa de preenchimento autom\u00e1tico.<\/p>\n<h2>Conclus\u00e3o e c\u00f3digo completo<\/h2>\n<p>Adicionamos com sucesso um preenchimento autom\u00e1tico \u00e0 funcionalidade de pesquisa do WordPress, onde temos controle total das correspond\u00eancias a serem retornadas. Isso oferece aos visitantes uma maneira mais r\u00e1pida de navegar em seu conte\u00fado, pois clicar em uma correspond\u00eancia redirecionar\u00e1 diretamente para a postagem, em vez de fazer um desvio em uma p\u00e1gina de resultados de pesquisa primeiro. Implementar um preenchimento autom\u00e1tico nem sempre faz sentido em todos os sites WordPress, mas pode ser \u00f3timo para pesquisar conte\u00fado espec\u00edfico ou em modelos especiais!<\/p>\n<p>Aqui est\u00e1 o c\u00f3digo final na \u00edntegra:<\/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\">Fonte de grava\u00e7\u00e3o:  <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 \u00e9 para voc\u00ea que deseja implementar uma pesquisa de preenchimento autom\u00e1tico no WordPress, onde temos total controle das correspond\u00eancias retornadas.<\/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":[898,898,722,722,837,1110,806,806,837,846,846,867,867],"tags":[1170],"class_list":["post-233387","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo-2","category-desenvolvedor","category-guia-para-iniciantes","category-n-a","category-php-8","category-tutoriais","category-wordpress-8","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/233387","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/comments?post=233387"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/233387\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/224845"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=233387"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=233387"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=233387"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}