{"id":233367,"date":"2023-02-12T12:02:00","date_gmt":"2023-02-12T09:02:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233367"},"modified":"2023-02-16T17:06:52","modified_gmt":"2023-02-16T14:06:52","slug":"wordpressis-automaatse-taeitmise-otsingu-tegemine-koodiga","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/et\/wordpressis-automaatse-taeitmise-otsingu-tegemine-koodiga\/","title":{"rendered":"WordPressis automaatse t\u00e4itmise otsingu tegemine koodiga"},"content":{"rendered":"\n<p>See \u00f5petus on m\u00f5eldud teile, kes soovite WordPressis rakendada automaatse t\u00e4itmise otsingut, kus meie kontrollime tagastatud vasteid t\u00e4ielikult.<\/p>\n<p>Rakendame standardsele WordPressi otsingule automaatse t\u00e4itmise, kuid kood on v\u00e4ga paindlik, et saaksite p\u00e4ringut oma vajadustele vastavaks kohandada. Olgu see siis spetsiifilisem p\u00e4ring kohandatud postituse t\u00fc\u00fcbi, postituse meta, kategooriate v\u00f5i t\u00e4iesti erinevat t\u00fc\u00fcpi sisu (nt kasutajad) v\u00f5i m\u00f5ne andmebaasi k\u00e4sitsi esitatud p\u00e4ringuga. Automaatse t\u00e4itmise saate h\u00f5lpsalt rakendada ka kohandatud otsingusisendile WordPressi standardotsingu asemel.<\/p>\n<h2>Mida me teeme<\/h2>\n<p>Automaatne t\u00e4itmine on kasutajaliidese kast, mis kuvatakse tippimise ajal otsinguv\u00e4lja all ja n\u00e4itab vasteid. Kui kl\u00f5psate vastel, saadab brauser teid selle postituse p\u00fcsilingile. See annab l\u00f5ppkasutajale kiirema viisi teie sisus navigeerimiseks, kuna nad ei pea teie otsingutulemuste lehele lisap\u00f5ike tegema. Kasutame vastete pidevaks v\u00e4rskendamiseks kasutaja tippimise ajal AJAX-i.<\/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=\"WordPressis automaatse t\u00e4itmise otsingu tegemine koodiga\"><\/a><\/p>\n<p>Automaatne t\u00e4itmine luuakse skripti <a href=\"https:\/\/jqueryui.com\/autocomplete\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">jQuery UI Autocomplete<\/a> abil, mis sisaldub WordPressis vaikimisi.<\/p>\n<h2>Koodi seadistamine<\/h2>\n<p>Peate lisama koodi kas teema <code>functions.php<\/code>v\u00f5i aktiivsesse pistikprogrammi PHP-faili. See \u00f5petus p\u00f5hineb selle lisamisel teemasse. Kohandage teid oma projektiga sobivaks.<\/p>\n<p>Esimene samm on Javascripti faili loomine, mis sisaldab meie koodi automaatse t\u00e4itmise k\u00e4ivitamiseks. Selle \u00f5petuse osas loon <code>autocomplete.js<\/code>oma teema <code>assets\/js\/<\/code>kausta t\u00fchja faili. See, kuhu faili paigutate, on teie otsustada, pidage meeles, et kohandage allolevaid teid. Tuleme selle faili juurde tagasi p\u00e4rast seda, kui oleme selle faili WordPressis korralikult j\u00e4rjekorda paigutanud.<\/p>\n<h3>Skriptide ja stiilide j\u00e4rjestamine<\/h3>\n<p>Peame j\u00e4rjekorda panema oma automaatse t\u00e4itmise Javascripti faili ning veenduma ka jQuery ja jQuery kasutajaliidese automaatse t\u00e4itmise j\u00e4rjekorda panemises. Lisaks ei sisalda WordPress jQuery kasutajaliidese teekide jaoks \u00fchtegi stiili, seega peame ka jQuery kasutajaliidese jaoks laaditabeli Google CDN-ist j\u00e4rjekorda lisama. See on muidugi vabatahtlik. Saate CSS-i lisada muul viisil v\u00f5i eelistate seda ise kujundada.<\/p>\n<p>Paneme k\u00f5ik skriptid ja stiilid j\u00e4rjekorda funktsiooniga, mis on \u00fchendatud <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>\u00dclaltoodud <code>[wp_enqueue_script](https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_script\/)()<\/code>funktsioonikutse lisab meie vastloodud Javascripti faili \u00f5igete s\u00f5ltuvustega (kolmanda parameetrina massiiv). See tagab, et WordPress lisab meie WordPressi eksemplari jQuery ja jQuery kasutajaliidese automaatse t\u00e4itmise skriptid.<\/p>\n<p>J\u00e4rgmisena peame esitama m\u00f5ned muutujad, millele p\u00e4\u00e4seme juurde meie automaatse t\u00e4itmise skripti kaudu. Peame teadma AJAX-i URL-i ja tahame turvalisuse huvides lisada ka <a href=\"https:\/\/codex.wordpress.org\/WordPress_Nonces\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">nonce&#8217;i<\/a>. Saame seda teha kasutades <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>Funktsioon <code>wp_localize_script()<\/code>loob globaalse Javascripti muutuja <code>AutocompleteSearch<\/code>kahe atribuudiga; <code>ajax_url<\/code>ja <code>ajax_nonce<\/code>. Selle abil saame oma automaatse t\u00e4itmisega Javascripti failis tuua n\u00e4iteks WordPressi AJAX-i URL-i v\u00e4\u00e4rtuse koos <code>AutocompleteSearch.ajax_url<\/code>.<\/p>\n<p>L\u00f5puks peame lisama veidi stiili. Nagu mainitud, ei ole WordPressiga kaasas \u00fchtegi jQuery kasutajaliidese stiili, seega peame m\u00f5ned ise lisama. Olen valinud stiilitabeli lisamise <a href=\"https:\/\/developers.google.com\/speed\/libraries\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Google&#8217;i CDN<\/a> -i kaudu. Kuid selle stiilitabeli toomiseks peame teadma jQuery kasutajaliidese versiooninumbrit. V\u00f5iksime versiooninumbri k\u00f5vasti kodeerida, aga ma ei ole millegi k\u00f5vakodeerimise f\u00e4nn. Altpoolt leiate toreda nipi, kuidas WordPressis salvestatud jQuery kasutajaliidese versiooniteavet edasi kasutada.<\/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>Kasutame <code>[wp_enqueue_style](https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_style\/)()<\/code>registreerimiseks ja uue stiilitabeli lisamiseks teise argumendina esitatud CDN-i teega. Kehtiva jQuery kasutajaliidese versiooninumbri toomiseks kasutame funktsioonist saadud teavet <code>[wp_scripts](https:\/\/developer.wordpress.org\/reference\/functions\/wp_scripts\/)()<\/code>.<\/p>\n<p>Ja see on k\u00f5ik, mida vajame skriptide j\u00e4rjekorda seadmiseks!<\/p>\n<h3>Automaatselt t\u00e4idetava Javascripti kirjutamine<\/h3>\n<p>Tuleme tagasi oma <code>autocomplete.js<\/code>faili juurde. Teame, et selle skripti laadimisel on jQuery ja jQuery kasutajaliidese automaatne t\u00e4itmine juba laaditud ning meil on juurdep\u00e4\u00e4s ka globaalsele muutujale koos vajaliku teabega. Alustame jQuery dokumendi valmidusfunktsiooni seadistamisega, et tagada meie koodi k\u00e4itamine p\u00e4rast seda, kui DOM on valmis.<\/p>\n<pre><code>jQuery(function($) {\n    \/\/ All code in here\n});<\/code><\/pre>\n<p>Kui viitame <a href=\"https:\/\/jqueryui.com\/autocomplete\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">jQuery kasutajaliidese automaatse<\/a> t\u00e4itmise dokumentatsioonile, saame teada, et peame looma jQuery valija, mis sihiks sisendv\u00e4lja, ja k\u00e4ivitama sellel funktsiooni <code>autocomplete()<\/code>.<\/p>\n<p>See on punkt, kus saate koodi oma vajadustele vastavaks kohandada. See \u00f5petus rakendab automaatse t\u00e4itmise standardsele WordPressi otsinguv\u00e4ljale (mis lisatakse tavaliselt teemasse, lisades otsingumalli v\u00f5i vidina). Otsingusisendi klassinimed v\u00f5ivad teemati erineda. Kuid v\u00f5ite sihtida kohandatud sisestusv\u00e4lja v\u00f5i otsida spetsiaalset malli. K\u00f5ik, mida pead tegema, on muuta jQuery valijat soovitud sisendi sihtimiseks.<\/p>\n<p>Minu teemas on standardse WordPressi otsinguv\u00e4lja sisendi klass <code>.search-field<\/code>. Lisan ka emavormi klassi nime, et seda veelgi kitsendada, et me ei riskiks sellega, et automaatne t\u00e4itmine rakendub millelegi muule sama klassi kasutamisel.<\/p>\n<p>Vastavalt automaatse t\u00e4itmise dokumentatsioonile saame atribuudis teha AJAX-i k\u00f5ne <code>source<\/code>(mis peab tagastama automaatse t\u00e4itmisega kuvatavate \u00fcksuste massiivi). Selleks kasutame <a href=\"https:\/\/api.jquery.com\/jquery.ajax\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">jQuery Ajaxi funktsiooni<\/a> :<\/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>Rida <code>#2<\/code>on koht, kus me \u00fctleme jQuery kasutajaliidese automaatsele t\u00e4itmisele, millisele sisestusv\u00e4ljale soovime automaatse t\u00e4itmise rakendada. Muutke seda valijat vastavalt oma vajadustele.<\/p>\n<p>K\u00f5ige lihtsamal kujul ootab automaatne t\u00e4itmine atribuudile \u00fcksuseobjektide massiivi <code>source<\/code>. Siin loome kahe parameetriga funktsiooni; <code>request<\/code>sisaldab teavet meie sisestatud v\u00e4\u00e4rtuse (<code>request.term<\/code>) kohta, <code>response<\/code>mis on tagasihelistamisfunktsioon, mida peame helistama ja andmeid esitama. Seda me teeme AJAX-i <code>success<\/code>funktsioonis real <code>#13<\/code>.<\/p>\n<p>AJAX-k\u00f5ne ise on \u00fcsna tavaline. M\u00e4\u00e4rame andmet\u00fc\u00fcbiks JSON \u2013 see on oluline, vastasel juhul ei saa jQuery kasutajaliidese automaatne t\u00e4itmine tulemusi s\u00f5eluda. Globaalses muutujas ligi <code>url<\/code>p\u00e4\u00e4sedes <code>ajax_url<\/code>lokaliseerisime oma skripti varem; <code>AutocompleteSearch<\/code>. Ja kui <code>data<\/code>me infoobjektist m\u00f6\u00f6dume. Atribuut <code>action<\/code>on kohustuslik ja vajalik j\u00e4rgmise sammu jaoks, milleks on selle konkreetse AJAX-i p\u00e4ringu tuvastamine PHP-s. Samuti anname turvalisuse huvides edasi sisestatud termini sisendis ja nonce.<\/p>\n<p>See on <code>sources<\/code>vara jaoks. Meil on veel \u00fcks asi, mille peame oma automaatse t\u00e4itmise skripti lisama. jQuery kasutajaliidese automaatse t\u00e4itmise vaikeseadena t\u00e4idab \u00fcksuse valimine lihtsalt sisendi valitud elemendiga automaatselt. Soovime kasutaja loendist \u00fcksuse valimisel \u00fcmber suunata postituse URL-ile. Seega lisame <code>select<\/code>atribuudile funktsiooni:<\/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>\u00dcksuste massiivi naaseme oma AJAX-i k\u00f5nest (kirjutame selle j\u00e4rgmisena) iga \u00fcksus on omadustega objekt. Lisame <code>link<\/code>igale \u00fcksusele (<code>ui.item<\/code>) kohandatud atribuudi, mis sisaldab iga postituse p\u00fcsilinke. Edastame selle URL-i, <code>[window.location.href](https:\/\/www.w3schools.com\/js\/js_window_location.asp)<\/code>mis k\u00e4ivitab brauseri \u00fcmbersuunamise.<\/p>\n<p>Ja see on Javascripti osa jaoks k\u00f5ik! J\u00e4\u00e4b vaid kirjutada PHP osa, mis kuulab koos toiminguga AJAX-i p\u00e4ringuid <code>autocompleteSearch<\/code>.<\/p>\n<h3>Tulemuste tagastamine PHP-s AJAX-i p\u00e4ringutele<\/h3>\n<p>Konkreetsetele AJAX-i p\u00e4ringutele vastavate funktsioonide kirjutamiseks kasutame konkse <code>wp_ajax_{action}<\/code>(sisselogitud k\u00fclastajad) ja <code>wp_ajax_nopriv_{action}<\/code>(sisselogimata k\u00fclastajad). M\u00e4\u00e4ratlesime toimingu nagu <code>autocompleteSearch<\/code>\u00fclaltoodud AJAX-i taotluses. Kui te pole sellega tuttav, vaadake minu <a href=\"https:\/\/wordpress.mediadoma.com\/et\/juhend-kuidas-wordpressis-ajax-i-oigesti-kasutada\/\" title=\"postitust, mis selgitab, kuidas AJAX WordPressis t\u00f6\u00f6tab .\">postitust, mis selgitab, kuidas AJAX WordPressis t\u00f6\u00f6tab .<\/a><\/p>\n<p>Seadistame selle sisse <code>functions.php<\/code>(v\u00f5i kuhu iganes PHP-s koodi lisate):<\/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>\u00dclaltoodud koodiga \u00fchendame sama funktsiooni kahe AJAX-konksuga. K\u00f5ikides funktsioonides, mis on \u00fchendatud wp_ajax AJAX konksudega, peame alati <code>die()<\/code>v\u00f5i <code>exit<\/code>l\u00f5pus tagama, et me ei kajaks v\u00e4lja soovimatuid v\u00e4ljundeid. Kasutan WordPressi <code>[wp_die](https:\/\/developer.wordpress.org\/reference\/functions\/wp_die\/)()<\/code>funktsiooni.<\/p>\n<p>Saame edastatud andmeid Javascriptist hankida kasutades <code>$_REQUEST<\/code>(t\u00f6\u00f6tab nii GET kui ka POST p\u00e4ringute puhul). Oma Javascripti koodis edastasime sisestatud termini v\u00f5tmes &#8216; <code>term<\/code>&#8216;. See t\u00e4hendab, et saame selle v\u00e4\u00e4rtuse hankida <code>$_REQUEST['term']<\/code>. Seej\u00e4rel saame selle p\u00f5hjal p\u00e4ringu sooritada. Pidage meeles, et tahame tagastada ainult sellele otsinguterminile vastavad tulemused.<\/p>\n<p>See on veel \u00fcks punkt, kus saate koodi t\u00e4ielikult oma vajadustele vastavaks muuta ja kohandada. See \u00f5petus teeb postituste ja lehtede kohta standardp\u00e4ringu, kuid saate p\u00e4ringut muuta v\u00f5i teha erinevate andmete kohta t\u00e4iesti erineva p\u00e4ringu. V\u00f5ib-olla eelistate v\u00f5i peate selle asemel sooritama k\u00e4sitsi SQL-p\u00e4ringu (see on kindlasti m\u00e4lut\u00f5husam). Siin on otsustava t\u00e4htsusega massiiv, mida me l\u00f5pus kordame ja mida s\u00f5elub meie Javascripti automaatse t\u00e4itmise kood.<\/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>Esmalt kontrollime, kas meie AJAX-k\u00f5nede turvalisuse tagamiseks ei kehti. Seda saame teha funktsiooni kutsumisega <code>[check_ajax_referer](https:\/\/developer.wordpress.org\/reference\/functions\/check_ajax_referer\/)()<\/code>. Lisasin ka koodi tagamaks, et me ei esitaks rasket p\u00e4ringut, kui tagastatud otsingutermin oli t\u00fchi. Seej\u00e4rel peaksime tagastama t\u00fchja json-kodeeringuga massiivi.<\/p>\n<p>\u00dclaltoodud n\u00e4itekood sooritab <code>[WP_Query](https:\/\/developer.wordpress.org\/reference\/classes\/wp_query\/)<\/code>sisestatud termini otsinguga a. Peame tagama <code>posts_per_page<\/code>, et tagastame k\u00f5ik tikud. Kui soovite p\u00e4ringut veelgi muuta, <code>-1<\/code>vaadake dokumentatsiooni .<code>WP_Query<\/code><\/p>\n<p>Seej\u00e4rel vaatame tulemusi l\u00e4bi (rida <code>#17<\/code>) ja t\u00e4idame massiivi vastetega (rida <code>#19-23<\/code>). jQuery kasutajaliidese automaatne t\u00e4itmine vajab <code>label<\/code>automaatse t\u00e4itmise kastis kuvatava sisu t\u00e4histamiseks v\u00e4hemalt v\u00f5imsust. Samuti edastame p\u00fcsilingid v\u00f5tmes &#8216; <code>link<\/code>&#8216;, mida kasutame oma Javascripti koodis kasutaja \u00fcmbersuunamiseks.<\/p>\n<p>L\u00f5puks kordame real <code>#27<\/code>loodud massiivi JSON-ina, kasutades <code>[json_encode](https:\/\/www.php.net\/manual\/en\/function.json-encode.php)()<\/code>.<\/p>\n<p>Kui see PHP osa on paigas, peaks meie automaatne t\u00e4itmine toimima! V\u00e4rskendage oma saiti ja proovige seda!<\/p>\n<h2>Valikulised t\u00e4iustused<\/h2>\n<p>\u00dcks levinud probleem on see, et vasteid on liiga palju ja automaatse t\u00e4itmise kast l\u00e4heb liiga suureks. Sellele on kaks lahendust.<\/p>\n<p>\u00dcks lahendus on lisada atribuut <code>minLength<\/code>funktsioonile <code>autocomplete()<\/code>Javascriptis. See atribuut k\u00e4ivitab automaatse t\u00e4itmise kasti alles p\u00e4rast teatud arvu m\u00e4rkide sisestamist. N\u00e4iteks v\u00f5ime enne automaatse t\u00e4itmise k\u00e4ivitamist n\u00f5uda v\u00e4hemalt 3 t\u00e4hem\u00e4rki:<\/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 pakub <a href=\"https:\/\/jqueryui.com\/autocomplete\/#maxheight\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">siin v\u00e4lja teise lahenduse<\/a>. See n\u00e4itab n\u00e4idet natuke CSS-i lisamisest, et lisada automaatse t\u00e4itmise kasti fikseeritud k\u00f5rgus ja sisemine kerimisriba.<\/p>\n<h2>J\u00e4reldus ja t\u00e4ielik kood<\/h2>\n<p>Oleme edukalt lisanud WordPressi otsingufunktsiooni automaatse t\u00e4itmise, kus meil on t\u00e4ielik kontroll tagastatavate vastete \u00fcle. See annab k\u00fclastajatele kiirema viisi teie sisus navigeerimiseks, kuna vastel kl\u00f5psamine suunab otse postitusele, selle asemel et minna esmalt otsingutulemuste lehele. Automaatse t\u00e4itmise rakendamine ei pruugi k\u00f5igil WordPressi saitidel alati m\u00f5ttekas olla, kuid see v\u00f5ib olla suurep\u00e4rane konkreetse sisu v\u00f5i spetsiaalsete mallide otsimiseks!<\/p>\n<p>Siin on l\u00f5plik kood tervikuna:<\/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\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/awhitepixel.com\" class=\"external external_icon\">awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>See \u00f5petus on m\u00f5eldud teile, kes soovite WordPressis rakendada automaatse t\u00e4itmise otsingut, kus meie kontrollime tagastatud vasteid t\u00e4ielikult.<\/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":[718,894,718,833,894,1110,842,802,802,833,842,863,863],"tags":[1165],"class_list":{"0":"post-233367","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-arendaja","8":"category-kood","10":"category-juhend-algajatele","12":"category-n-a","13":"category-opetused","14":"category-php-4","18":"category-wordpress-4","20":"tag-affiai-et"},"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/233367","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/comments?post=233367"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/233367\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media\/224845"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media?parent=233367"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/categories?post=233367"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/tags?post=233367"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}