{"id":233358,"date":"2023-02-12T12:21:00","date_gmt":"2023-02-12T09:21:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233358"},"modified":"2023-02-16T16:37:11","modified_gmt":"2023-02-16T13:37:11","slug":"automaattisen-taeydennyshaun-tekeminen-wordpressissae-koodilla","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/automaattisen-taeydennyshaun-tekeminen-wordpressissae-koodilla\/","title":{"rendered":"Automaattisen t\u00e4ydennyshaun tekeminen WordPressiss\u00e4 koodilla"},"content":{"rendered":"\n

T\u00e4m\u00e4 opetusohjelma on sinulle, joka haluat toteuttaa automaattisen t\u00e4ydennyksen haun WordPressiss\u00e4, jossa voimme t\u00e4ysin hallita palautettuja osumia.<\/p>\n

K\u00e4yt\u00e4mme automaattista t\u00e4ydennyst\u00e4 tavalliseen WordPress-hakuun, mutta koodi on eritt\u00e4in joustava, jotta voit mukauttaa kyselyn tarpeisiisi. Olipa kyseess\u00e4 tarkempi kysely mukautetun viestityypin, viestin metan, luokkien tai t\u00e4ysin erityyppisen sis\u00e4ll\u00f6n, kuten k\u00e4ytt\u00e4jien, tai tietokannan manuaalisen kyselyn perusteella. Voit my\u00f6s helposti k\u00e4ytt\u00e4\u00e4 automaattista t\u00e4ydennyst\u00e4 mukautetussa haussa tavallisen WordPress-haun sijaan.<\/p>\n

Mit\u00e4 teemme<\/h2>\n

Automaattinen t\u00e4ydennys on k\u00e4ytt\u00f6liittym\u00e4ruutu, joka n\u00e4kyy hakukent\u00e4n alla ja n\u00e4ytt\u00e4\u00e4 osumat kirjoittaessasi. Kun napsautat ottelua, selain l\u00e4hett\u00e4\u00e4 sinut kyseisen viestin pysyv\u00e4\u00e4n linkkiin. T\u00e4m\u00e4 tarjoaa loppuk\u00e4ytt\u00e4j\u00e4lle nopeamman tavan navigoida sis\u00e4ll\u00f6ss\u00e4si, koska heid\u00e4n ei tarvitse tehd\u00e4 ylim\u00e4\u00e4r\u00e4ist\u00e4 kiertotiet\u00e4 hakutulossivullesi. K\u00e4yt\u00e4mme AJAXia otteluiden jatkuvaan p\u00e4ivitt\u00e4miseen k\u00e4ytt\u00e4j\u00e4n kirjoittaessa.<\/p>\n

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

Automaattinen t\u00e4ydennys luodaan jQuery UI Autocompleten<\/a> avulla, skripti, joka sis\u00e4ltyy WordPressiin oletuksena.<\/p>\n

Koodin asettaminen<\/h2>\n

Sinun on lis\u00e4tt\u00e4v\u00e4 koodi joko teeman functions.php<\/code>tai aktiivisen lis\u00e4osan PHP-tiedostoon. T\u00e4m\u00e4 opetusohjelma perustuu sen lis\u00e4\u00e4miseen teemaan. S\u00e4\u00e4d\u00e4 polut sopivaksi projektiisi.<\/p>\n

Ensimm\u00e4inen vaihe on Javascript-tiedoston luominen, joka sis\u00e4lt\u00e4\u00e4 koodimme automaattisen t\u00e4ydennyksen k\u00e4ynnist\u00e4miseksi. Mit\u00e4 tulee t\u00e4h\u00e4n opetusohjelmaan, luon tyhj\u00e4n autocomplete.js<\/code>tiedoston teemani assets\/js\/<\/code>kansioon. Voit p\u00e4\u00e4tt\u00e4\u00e4, minne sijoitat tiedoston, muista vain s\u00e4\u00e4t\u00e4\u00e4 alla olevia polkuja. Palaamme t\u00e4h\u00e4n tiedostoon, kun olemme lis\u00e4nneet t\u00e4m\u00e4n tiedoston oikein WordPressiin.<\/p>\n

Skriptien ja tyylien jonottaminen<\/h3>\n

Meid\u00e4n on asetettava jonoon automaattisen t\u00e4ydennyksen Javascript-tiedostomme ja meid\u00e4n on my\u00f6s varmistettava, ett\u00e4 jQuery ja jQuery UI Autocomplete asetetaan jonoon. Lis\u00e4ksi WordPress ei sis\u00e4ll\u00e4 jQuery-k\u00e4ytt\u00f6liittym\u00e4kirjastojen tyyli\u00e4, joten meid\u00e4n on my\u00f6s lis\u00e4tt\u00e4v\u00e4 jQuery-k\u00e4ytt\u00f6liittym\u00e4n tyylitaulukko Google CDN:st\u00e4. T\u00e4m\u00e4 on tietysti valinnainen. Voit lis\u00e4t\u00e4 CSS:n jollain muulla tavalla tai ehk\u00e4 mieluummin muotoilla sen itse.<\/p>\n

Panemme kaikki komentosarjat ja tyylit jonoon funktioon, joka on koukussa wp_enqueue_scripts<\/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});<\/code><\/pre>\n
Yll\u00e4 oleva [wp_enqueue_script](https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_script\/)()<\/code>funktiokutsu lis\u00e4\u00e4 juuri luodun Javascript-tiedostomme oikeilla riippuvuuksilla (joukko kolmantena parametrina). T\u00e4m\u00e4 varmistaa, ett\u00e4 WordPress lis\u00e4\u00e4 jQuery- ja jQuery UI Autocomplete -skriptit WordPress-esiintym\u00e4\u00e4n.<\/p>\n
Seuraavaksi meid\u00e4n on annettava joitain muuttujia, joita voimme k\u00e4ytt\u00e4\u00e4 automaattisen t\u00e4ydennyksen komentosarjastamme. Meid\u00e4n on tiedett\u00e4v\u00e4 AJAX-URL-osoite, ja haluamme my\u00f6s lis\u00e4t\u00e4 nonce<\/a> -koodin turvallisuuden vuoksi. Voimme tehd\u00e4 t\u00e4m\u00e4n k\u00e4ytt\u00e4m\u00e4ll\u00e4 [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
Funktio wp_localize_script()<\/code>luo globaalin Javascript-muuttujan AutocompleteSearch<\/code>, jossa on kaksi ominaisuutta; ajax_url<\/code>ja ajax_nonce<\/code>. T\u00e4m\u00e4n avulla voimme automaattisesti t\u00e4ydennett\u00e4v\u00e4ss\u00e4 Javascript-tiedostossamme hakea esimerkiksi WordPressin AJAX-URL-osoitteen arvon AutocompleteSearch.ajax_url<\/code>.<\/p>\n
Lopuksi meid\u00e4n on lis\u00e4tt\u00e4v\u00e4 hieman tyyli\u00e4. Kuten mainittiin, WordPress ei sis\u00e4ll\u00e4 jQuery-k\u00e4ytt\u00f6liittym\u00e4n tyyli\u00e4, joten meid\u00e4n on lis\u00e4tt\u00e4v\u00e4 niit\u00e4 itse. Olen valinnut tyylitaulukon lis\u00e4\u00e4misen Google CDN<\/a> :n kautta. Mutta meid\u00e4n on tiedett\u00e4v\u00e4 jQuery-k\u00e4ytt\u00f6liittym\u00e4n versionumero, jotta voimme noutaa sen tyylitaulukon. Voisimme koodata versionumeron, mutta en ole kovakoodauksen yst\u00e4v\u00e4. Alta l\u00f6yd\u00e4t kivan tempun WordPressiin tallennettujen jQuery-k\u00e4ytt\u00f6liittym\u00e4n versiotietojen hy\u00f6dynt\u00e4miseen.<\/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
K\u00e4yt\u00e4mme [wp_enqueue_style](https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_style\/)()<\/code>rekister\u00f6inti\u00e4 ja lis\u00e4\u00e4m\u00e4\u00e4n uusi tyylitaulukko, jossa on annettu CDN-polku toisena argumenttina. K\u00e4yt\u00e4mme funktion antamia tietoja kelvollisen jQuery-k\u00e4ytt\u00f6liittym\u00e4n versionumeron hakemiseksi [wp_scripts](https:\/\/developer.wordpress.org\/reference\/functions\/wp_scripts\/)()<\/code>.<\/p>\n
Ja siin\u00e4 kaikki, mit\u00e4 tarvitsemme skriptien jonottamiseen!<\/p>\n
Automaattisesti t\u00e4ydent\u00e4v\u00e4n Javascriptin kirjoittaminen<\/h3>\n
Palataan autocomplete.js<\/code>tiedostoomme. Tied\u00e4mme, ett\u00e4 kun t\u00e4m\u00e4 komentosarja ladataan, jQuery ja jQuery UI Autocomplete on jo ladattu, ja meill\u00e4 on my\u00f6s p\u00e4\u00e4sy globaaliin muuttujaan, jossa on tarvittavat tiedot. Aloitetaan m\u00e4\u00e4ritt\u00e4m\u00e4ll\u00e4 jQuery-dokumenttivalmiustoiminto varmistaaksemme, ett\u00e4 koodimme suoritetaan sen j\u00e4lkeen, kun DOM on valmis.<\/p>\n
jQuery(function($) {\n    \/\/ All code in here\n});<\/code><\/pre>\n
Jos viittaamme jQuery-k\u00e4ytt\u00f6liittym\u00e4n automaattisen t\u00e4ydennyksen dokumentaatioon<\/a>, opimme, ett\u00e4 meid\u00e4n on teht\u00e4v\u00e4 jQuery-valitsin, joka kohdistaa sy\u00f6tt\u00f6kentt\u00e4\u00e4n, ja suoritettava funktio autocomplete()<\/code>siin\u00e4.<\/p>\n
T\u00e4m\u00e4 on kohta, jossa voit muokata koodia tarpeidesi mukaan. T\u00e4m\u00e4 opetusohjelma k\u00e4ytt\u00e4\u00e4 automaattista t\u00e4ydennyst\u00e4 tavalliseen WordPress-hakukentt\u00e4\u00e4n (joka yleens\u00e4 lis\u00e4t\u00e4\u00e4n teemaan sis\u00e4llytt\u00e4m\u00e4ll\u00e4 hakumalli tai widget). Hakusy\u00f6tteen luokkien nimet voivat vaihdella teemasta toiseen. Mutta saatat haluta kohdistaa mukautettuun sy\u00f6tt\u00f6kentt\u00e4\u00e4n tai etsi\u00e4 erityisest\u00e4 mallista. Sinun tarvitsee vain muuttaa jQuery-valitsin kohdistamaan haluamasi sy\u00f6te.<\/p>\n
Teemassani WordPressin vakiohakukent\u00e4n sy\u00f6tteen luokka on .search-field<\/code>. Lis\u00e4\u00e4n my\u00f6s yl\u00e4lomakkeen luokan nimen kaventaakseni sit\u00e4 entisest\u00e4\u00e4n, jotta emme vaaranna, ett\u00e4 automaattista t\u00e4ydennyst\u00e4 sovelletaan johonkin muuhun samaa luokkaa k\u00e4ytt\u00e4v\u00e4\u00e4n.<\/p>\n
Automaattisen t\u00e4ydennyksen dokumentaation mukaan voimme suorittaa AJAX-kutsun ominaisuudessa source<\/code>(jonka on palautettava joukko kohteita n\u00e4ytett\u00e4v\u00e4ksi automaattisessa t\u00e4ydennyksess\u00e4). K\u00e4yt\u00e4mme jQueryn Ajax-funktiota<\/a> t\u00e4h\u00e4n:<\/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
Rivill\u00e4 #2<\/code>kerromme jQuery UI Autocompletelle, mihin sy\u00f6tt\u00f6kentt\u00e4\u00e4n haluamme k\u00e4ytt\u00e4\u00e4 automaattista t\u00e4ydennyst\u00e4. Muuta t\u00e4m\u00e4 valitsin tarpeidesi mukaan.<\/p>\n
Yksinkertaisimmassa muodossa automaattinen t\u00e4ydennys odottaa joukon nimikeobjekteja source<\/code>ominaisuuteen. T\u00e4ss\u00e4 luomme funktion kahdella parametrilla; request<\/code>sis\u00e4lt\u00e4\u00e4 tietoja sy\u00f6tetyst\u00e4 arvostamme (request.term<\/code>), response<\/code>joka on takaisinsoittotoiminto, jota meid\u00e4n on kutsuttava ja annettava tiedot. N\u00e4in teemme AJAX:n success<\/code>funktiossa rivill\u00e4 #13<\/code>.<\/p>\n
Itse AJAX-puhelu on melko vakio. M\u00e4\u00e4rit\u00e4mme tietotyypiksi JSON \u2013 t\u00e4m\u00e4 on t\u00e4rke\u00e4\u00e4, muuten jQuery UI Autocomplete ei pysty j\u00e4sent\u00e4m\u00e4\u00e4n tuloksia. Kun url<\/code>k\u00e4yt\u00e4mme ajax_url<\/code>globaalia muuttujaa, lokalisoimme skriptimme aiemmin; AutocompleteSearch<\/code>. Ja kun data<\/code>ohitamme tiedon kohteen. Ominaisuus action<\/code>on pakollinen ja v\u00e4ltt\u00e4m\u00e4t\u00f6n seuraavaa vaihetta varten \u2013 joka on t\u00e4m\u00e4n AJAX-pyynn\u00f6n tunnistaminen PHP:ss\u00e4. V\u00e4lit\u00e4mme my\u00f6s sy\u00f6tetyt termit sy\u00f6tteess\u00e4 ja nonce turvallisuussyist\u00e4.<\/p>\n
Siin\u00e4 se sources<\/code>omaisuudelle. On viel\u00e4 yksi asia, joka meid\u00e4n on lis\u00e4tt\u00e4v\u00e4 automaattiseen t\u00e4ydennykseen. Oletuksena jQuery-k\u00e4ytt\u00f6liittym\u00e4n automaattisessa t\u00e4ydennyksess\u00e4 kohteen valitseminen yksinkertaisesti t\u00e4ytt\u00e4\u00e4 sy\u00f6tteen automaattisesti valitulla elementill\u00e4. Haluamme ohjata k\u00e4ytt\u00e4j\u00e4n julkaisun URL-osoitteeseen valitessaan kohteen luettelosta. Joten lis\u00e4\u00e4mme select<\/code>ominaisuuteen funktion:<\/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
Palaamme AJAX-kutsusta (kirjoitamme t\u00e4m\u00e4n seuraavaksi) kohteiden joukossa jokainen kohde, jolla on ominaisuuksia. Lis\u00e4\u00e4mme link<\/code>jokaiseen kohteeseen mukautetun ominaisuuden (ui.item<\/code>), joka sis\u00e4lt\u00e4\u00e4 pysyv\u00e4t linkit jokaiseen viestiin. V\u00e4lit\u00e4mme t\u00e4m\u00e4n URL-osoitteen, [window.location.href](https:\/\/www.w3schools.com\/js\/js_window_location.asp)<\/code>joka k\u00e4ynnist\u00e4\u00e4 selaimen uudelleenohjauksen.<\/p>\n
Ja siin\u00e4 kaikki Javascript-osalle! J\u00e4ljelle j\u00e4\u00e4 vain PHP-osan kirjoittaminen, joka kuuntelee AJAX-pyynt\u00f6j\u00e4 toiminnolla autocompleteSearch<\/code>.<\/p>\n
PHP-tulosten palauttaminen AJAX-pyynt\u00f6ihin<\/h3>\n
Kirjoittaaksemme toimintoja, jotka vastaavat tiettyihin AJAX-pyynt\u00f6ihin, k\u00e4yt\u00e4mme koukkuja wp_ajax_{action}<\/code>(sis\u00e4\u00e4nkirjautuneet vierailijat) ja wp_ajax_nopriv_{action}<\/code>(kirjautumattomat vierailijat). M\u00e4\u00e4ritimme toiminnon kuten autocompleteSearch<\/code>yll\u00e4 olevassa AJAX-pyynn\u00f6ss\u00e4mme. Katso viesti\u00e4ni, joka selitt\u00e4\u00e4, kuinka AJAX toimii WordPressiss\u00e4,<\/a> jos et ole perehtynyt t\u00e4h\u00e4n.<\/p>\n
Asetetaan t\u00e4m\u00e4 sis\u00e4\u00e4n functions.php<\/code>(tai mihin tahansa PHP:ss\u00e4, johon lis\u00e4\u00e4t koodisi):<\/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
Yll\u00e4 olevalla koodilla kytkemme saman toiminnon kahteen AJAX-koukkuun. Kaikissa wp_ajax AJAX-koukkuihin kytketyiss\u00e4 funktioissa meid\u00e4n on varmistettava, ett\u00e4 se on aina die()<\/code>tai exit<\/code>lopussa, jotta emme toista ei-toivottua tulosta. K\u00e4yt\u00e4n WordPress- [wp_die](https:\/\/developer.wordpress.org\/reference\/functions\/wp_die\/)()<\/code>toimintoa.<\/p>\n
Voimme hakea v\u00e4litetyt tiedot Javascriptist\u00e4 k\u00e4ytt\u00e4m\u00e4ll\u00e4 $_REQUEST<\/code>(toimii sek\u00e4 GET- ett\u00e4 POST-pyynn\u00f6iss\u00e4). Javascript-koodissamme v\u00e4litimme sy\u00f6tetyn termin avaimessa ’ term<\/code>’. T\u00e4m\u00e4 tarkoittaa, ett\u00e4 voimme hakea sen arvon $_REQUEST['term']<\/code>. Voimme sitten suorittaa kyselyn t\u00e4m\u00e4n perusteella. Muista, ett\u00e4 haluamme palauttaa vain tuloksia, jotka vastaavat t\u00e4t\u00e4 hakutermi\u00e4.<\/p>\n
T\u00e4m\u00e4 on toinen kohta, jossa voit muuttaa ja muokata koodia t\u00e4ysin tarpeidesi mukaan. T\u00e4m\u00e4 opetusohjelma suorittaa standardin kyselyn viesteist\u00e4 ja sivuista, mutta voit muokata kysely\u00e4 tai suorittaa t\u00e4ysin erilaisen kyselyn eri tiedoille. Ehk\u00e4 haluat mieluummin tai sinun t\u00e4ytyy suorittaa manuaalinen SQL-kysely (se on varmasti muistitehokkaampi). Ratkaiseva osa t\u00e4ss\u00e4 on matriisi, jonka toistamme lopussa ja jonka j\u00e4sent\u00e4\u00e4 Javascriptin automaattinen t\u00e4ydennyskoodi.<\/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
Ensin tarkistamme, oliko nonce voimassa AJAX-puhelujemme turvallisuuden luomiseksi. Voimme tehd\u00e4 t\u00e4m\u00e4n kutsumalla funktiota [check_ajax_referer](https:\/\/developer.wordpress.org\/reference\/functions\/check_ajax_referer\/)()<\/code>. Olen my\u00f6s lis\u00e4nnyt koodin varmistaakseni, ett\u00e4 emme suorita raskasta pyynt\u00f6\u00e4, jos palautettu hakutermi on tyhj\u00e4. Meid\u00e4n pit\u00e4isi sitten palauttaa tyhj\u00e4 json-koodattu taulukko.<\/p>\n
Yll\u00e4 oleva esimerkkikoodi suorittaa [WP_Query](https:\/\/developer.wordpress.org\/reference\/classes\/wp_query\/)<\/code>haun sy\u00f6tetylle termille. Meid\u00e4n on posts_per_page<\/code>varmistettava -1<\/code>, ett\u00e4 palaamme kaikki ottelut. Tarkista dokumentaatio, WP_Query<\/code>jos haluat muokata kysely\u00e4 edelleen.<\/p>\n
Kierr\u00e4mme sitten tulokset (rivi #17<\/code>) ja t\u00e4yt\u00e4mme taulukon osumilla (rivi #19-23<\/code>). jQuery-k\u00e4ytt\u00f6liittym\u00e4n automaattinen t\u00e4ydennys tarvitsee v\u00e4hint\u00e4\u00e4n ominaisuuden label<\/code>ilmaisemaan, mit\u00e4 automaattisen t\u00e4ydennyksen ruudussa pit\u00e4isi n\u00e4ytt\u00e4\u00e4. V\u00e4lit\u00e4mme my\u00f6s pysyv\u00e4t linkit avaimessa ’ link<\/code>’, jota k\u00e4yt\u00e4mme Javascript-koodissamme k\u00e4ytt\u00e4j\u00e4n uudelleenohjaukseen.<\/p>\n
Lopuksi rivill\u00e4 #27<\/code>toistamme luodun taulukon JSON-muodossa k\u00e4ytt\u00e4m\u00e4ll\u00e4 [json_encode](https:\/\/www.php.net\/manual\/en\/function.json-encode.php)()<\/code>.<\/p>\n
Kun t\u00e4m\u00e4 PHP-osa on k\u00e4yt\u00f6ss\u00e4, automaattisen t\u00e4ydennyksen pit\u00e4isi toimia! P\u00e4ivit\u00e4 sivustosi ja kokeile sit\u00e4!<\/p>\n
Valinnaiset parannukset<\/h2>\n
Yksi yleinen ongelma on, ett\u00e4 osumia on liikaa ja automaattisen t\u00e4ydennyksen laatikko tulee liian suureksi. T\u00e4h\u00e4n on kaksi ratkaisua.<\/p>\n
Yksi ratkaisu on lis\u00e4t\u00e4 ominaisuus minLength<\/code>funktioon autocomplete()<\/code>Javascriptiss\u00e4. T\u00e4m\u00e4 ominaisuus k\u00e4ynnist\u00e4\u00e4 automaattisen t\u00e4ydennyksen ruudun vasta, kun tietty m\u00e4\u00e4r\u00e4 merkkej\u00e4 on sy\u00f6tetty. Esimerkkin\u00e4 voimme vaatia v\u00e4hint\u00e4\u00e4n 3 merkki\u00e4 ennen automaattisen t\u00e4ydennyksen k\u00e4ynnist\u00e4mist\u00e4:<\/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 ehdottaa t\u00e4ss\u00e4 toista ratkaisua<\/a>. Siin\u00e4 on esimerkki CSS:n lis\u00e4\u00e4misest\u00e4 kiinte\u00e4n korkeuden lis\u00e4\u00e4miseksi ja sis\u00e4isen vierityspalkin lis\u00e4\u00e4misest\u00e4 automaattisen t\u00e4ydennyksen ruutuun.<\/p>\n
Johtop\u00e4\u00e4t\u00f6s ja t\u00e4ydellinen koodi<\/h2>\n
Olemme onnistuneesti lis\u00e4nneet automaattisen t\u00e4ydennyksen WordPressin hakutoimintoihin, joissa voimme t\u00e4ysin hallita palautettavia osumia. Se antaa vierailijoille nopeamman tavan navigoida sis\u00e4ll\u00f6ss\u00e4si, koska osuman napsauttaminen ohjaa suoraan viestiin sen sijaan, ett\u00e4 l\u00e4hdett\u00e4isiin ensin hakutulossivulle. Automaattisen t\u00e4ydennyksen k\u00e4ytt\u00f6\u00f6notto ei v\u00e4ltt\u00e4m\u00e4tt\u00e4 aina ole j\u00e4rkev\u00e4\u00e4 kaikissa WordPress-sivustoissa, mutta se voi olla loistava tapa etsi\u00e4 tietty\u00e4 sis\u00e4lt\u00f6\u00e4 tai erityisi\u00e4 malleja!<\/p>\n
T\u00e4ss\u00e4 lopullinen koodi kokonaisuudessaan:<\/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
:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
T\u00e4m\u00e4 opetusohjelma on sinulle, joka haluat toteuttaa automaattisen t\u00e4ydennyksen haun WordPressiss\u00e4, jossa voimme t\u00e4ysin hallita palautettuja osumia.<\/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":[895,719,719,895,1110,834,843,803,803,834,843,864,864],"tags":[1166],"class_list":{"0":"post-233358","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-koodi","8":"category-kehittaejae","11":"category-n-a","12":"category-opas-aloittelijoille","13":"category-opetusohjelmia","14":"category-php-5","18":"category-wordpress-5","20":"tag-affiai-fi"},"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/233358","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/comments?post=233358"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/233358\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/224845"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=233358"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=233358"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=233358"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}