{"id":233335,"date":"2023-02-12T12:00:00","date_gmt":"2023-02-12T09:00:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233335"},"modified":"2023-02-16T17:25:06","modified_gmt":"2023-02-16T14:25:06","slug":"goera-autoslutfoera-soekningar-i-wordpress-med-kod","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/goera-autoslutfoera-soekningar-i-wordpress-med-kod\/","title":{"rendered":"G\u00f6ra autoslutf\u00f6ra s\u00f6kningar i WordPress med kod"},"content":{"rendered":"\n

Den h\u00e4r handledningen \u00e4r f\u00f6r dig som vill implementera en autoslutf\u00f6randes\u00f6kning i WordPress, d\u00e4r vi har full kontroll \u00f6ver de returnerade matchningarna.<\/p>\n

Vi kommer att till\u00e4mpa ett autoslutf\u00f6rande p\u00e5 den vanliga WordPress-s\u00f6kningen, men koden \u00e4r mycket flexibel s\u00e5 att du kan anpassa fr\u00e5gan efter dina behov. Oavsett om det \u00e4r en mer specifik fr\u00e5ga av en anpassad inl\u00e4ggstyp, inl\u00e4ggsmeta, kategorier eller fr\u00e5gor om helt annan typ av inneh\u00e5ll som anv\u00e4ndare eller n\u00e5got manuellt fr\u00e5n databasen. Du kan ocks\u00e5 enkelt till\u00e4mpa autoslutf\u00f6randet p\u00e5 en anpassad s\u00f6kinmatning ist\u00e4llet f\u00f6r den vanliga WordPress-s\u00f6kningen.<\/p>\n

Vad vi ska g\u00f6ra<\/h2>\n

Autoslutf\u00f6rande \u00e4r en gr\u00e4nssnittsruta som visas under s\u00f6kf\u00e4ltet och visar matchningarna medan du skriver. N\u00e4r du klickar p\u00e5 en matchning skickar webbl\u00e4saren dig till inl\u00e4ggets permal\u00e4nk. Detta ger slutanv\u00e4ndaren ett snabbare s\u00e4tt att navigera i ditt inneh\u00e5ll eftersom de inte beh\u00f6ver ta den extra omv\u00e4gen till din s\u00f6kresultatsida. Vi kommer att anv\u00e4nda AJAX f\u00f6r att kontinuerligt uppdatera matchningarna medan anv\u00e4ndaren skriver.<\/p>\n

\"G\u00f6ra<\/a><\/p>\n

Autokompletteringen genereras med hj\u00e4lp av jQuery UI Autocomplete<\/a>, ett skript som ing\u00e5r i WordPress som standard.<\/p>\n

St\u00e4ller in koden<\/h2>\n

Du kommer att beh\u00f6va l\u00e4gga till koden i antingen temats functions.php<\/code>eller en aktiv plugin PHP-fil. Denna handledning bygger p\u00e5 att l\u00e4gga till den i ett tema. Justera banorna s\u00e5 att de passar ditt projekt.<\/p>\n

Det f\u00f6rsta steget \u00e4r att skapa en Javascript-fil som kommer att inneh\u00e5lla v\u00e5r kod f\u00f6r att utl\u00f6sa autokomplettering. N\u00e4r det g\u00e4ller denna handledning skapar jag en tom autocomplete.js<\/code>fil i mitt temas assets\/js\/<\/code>mapp. Var du placerar din fil \u00e4r upp till dig, kom bara ih\u00e5g att justera s\u00f6kv\u00e4garna nedan. Vi \u00e5terkommer till den h\u00e4r filen n\u00e4r vi har st\u00e4llt den i k\u00f6 ordentligt i WordPress.<\/p>\n

Manus och stilar i k\u00f6<\/h3>\n

Vi m\u00e5ste st\u00e4lla v\u00e5r Javascript-fil f\u00f6r automatisk komplettering i k\u00f6 och vi m\u00e5ste ocks\u00e5 se till att st\u00e4lla jQuery och jQuery UI Autocomplete i k\u00f6. Dessutom inneh\u00e5ller WordPress inte n\u00e5gon styling f\u00f6r jQuery UI-bibliotek, s\u00e5 vi m\u00e5ste ocks\u00e5 st\u00e4lla en stilmall f\u00f6r jQuery UI fr\u00e5n Google CDN. Detta \u00e4r naturligtvis valfritt. Du kan l\u00e4gga till CSS p\u00e5 n\u00e5got annat s\u00e4tt eller kanske du f\u00f6redrar att styla den sj\u00e4lv.<\/p>\n

Vi st\u00e4ller alla skript och stilar i k\u00f6 i en funktion kopplad till 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
Funktionsanropet [wp_enqueue_script](https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_script\/)()<\/code>ovan kommer att l\u00e4gga till v\u00e5r nyskapade Javascript-fil med r\u00e4tt beroenden (matrisen som tredje parameter). Detta s\u00e4kerst\u00e4ller att WordPress l\u00e4gger till skripten jQuery och jQuery UI Autocomplete i v\u00e5r WordPress-instans.<\/p>\n
D\u00e4refter m\u00e5ste vi tillhandah\u00e5lla n\u00e5gra variabler som vi kan komma \u00e5t fr\u00e5n v\u00e5rt autoslutf\u00f6randeskript. Vi m\u00e5ste k\u00e4nna till AJAX URL och vi vill ocks\u00e5 l\u00e4gga till en nonce<\/a> f\u00f6r s\u00e4kerheten. Vi kan g\u00f6ra detta genom att anv\u00e4nda [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
Funktionen wp_localize_script()<\/code>kommer att skapa en global Javascript-variabel AutocompleteSearch<\/code>med tv\u00e5 egenskaper; ajax_url<\/code>och ajax_nonce<\/code>. Med detta kan vi i v\u00e5r autokomplettera Javascript-fil h\u00e4mta till exempel v\u00e4rdet p\u00e5 WordPress AJAX URL med AutocompleteSearch.ajax_url<\/code>.<\/p>\n
Slutligen m\u00e5ste vi l\u00e4gga till lite styling. Som n\u00e4mnts kommer WordPress inte med n\u00e5gon jQuery UI-styling inkluderad s\u00e5 vi m\u00e5ste l\u00e4gga till n\u00e5gra sj\u00e4lva. Jag har valt att l\u00e4gga till en stilmall via Google CDN<\/a>. Men vi beh\u00f6ver veta versionsnumret f\u00f6r jQuery UI f\u00f6r att kunna h\u00e4mta dess stilmall. Vi skulle kunna h\u00e5rdkoda ett versionsnummer, men jag \u00e4r inte ett fan av att h\u00e5rdkoda n\u00e5gonting. Nedan hittar du ett trevligt knep f\u00f6r att ta f\u00f6r sig av versionsinformationen f\u00f6r jQuery UI som lagras i WordPress.<\/p>\n
add_action('wp_enqueue_scripts', function() {\n    ...\n\u00a0\n    $wp_scripts = wp_scripts();\n    wp_enqueue_style('jquery-ui-css',\n        '\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/'. $wp_scripts->registered['jquery-ui-autocomplete']->ver. '\/themes\/smoothness\/jquery-ui.css',\n        false, null, false\n    );\n});<\/code><\/pre>\n
Vi anv\u00e4nder [wp_enqueue_style](https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_style\/)()<\/code>f\u00f6r att registrera och l\u00e4gga till en ny stilmall med den angivna CDN-s\u00f6kv\u00e4gen som andra argument. F\u00f6r att h\u00e4mta ett giltigt versionsnummer f\u00f6r jQuery UI anv\u00e4nder vi informationen fr\u00e5n funktionen [wp_scripts](https:\/\/developer.wordpress.org\/reference\/functions\/wp_scripts\/)()<\/code>.<\/p>\n
Och det \u00e4r allt vi beh\u00f6ver f\u00f6r att k\u00f6a skript!<\/p>\n
Skriver Javascript f\u00f6r automatisk komplettering<\/h3>\n
L\u00e5t oss \u00e5terg\u00e5 till v\u00e5r autocomplete.js<\/code>fil. Vi vet att n\u00e4r det h\u00e4r skriptet laddas \u00e4r jQuery och jQuery UI Autocomplete redan inl\u00e4sta, och vi har \u00e4ven tillg\u00e5ng till en global variabel med n\u00f6dv\u00e4ndig information. L\u00e5t oss b\u00f6rja med att st\u00e4lla in en jQuery-dokument redo-funktion f\u00f6r att s\u00e4kerst\u00e4lla att v\u00e5r kod k\u00f6rs efter att DOM \u00e4r klart.<\/p>\n
jQuery(function($) {\n    \/\/ All code in here\n});<\/code><\/pre>\n
Om vi \u200b\u200bh\u00e4nvisar till jQuery UI Autocompletes doumentation<\/a> l\u00e4r vi oss att vi m\u00e5ste g\u00f6ra en jQuery-v\u00e4ljare som riktar in sig p\u00e5 ett inmatningsf\u00e4lt och k\u00f6ra funktionen autocomplete()<\/code>p\u00e5 det.<\/p>\n
Detta \u00e4r en punkt d\u00e4r du kan justera koden f\u00f6r att passa dina behov. Den h\u00e4r handledningen kommer att till\u00e4mpa autoslutf\u00f6randet p\u00e5 det vanliga WordPress-s\u00f6kf\u00e4ltet (som vanligtvis l\u00e4ggs till i tema genom att inkludera s\u00f6kmallen eller som en widget). S\u00f6kinmatningens klassnamn kan variera fr\u00e5n tema till tema. Men du kanske vill rikta in dig p\u00e5 ett anpassat inmatningsf\u00e4lt eller s\u00f6ka i en speciell mall. Allt du beh\u00f6ver g\u00f6ra \u00e4r att \u00e4ndra jQuery-v\u00e4ljaren s\u00e5 att den riktar sig till den inmatning du vill ha.<\/p>\n
I mitt tema har den vanliga WordPress-s\u00f6kf\u00e4ltsinmatningen en klass av .search-field<\/code>. Jag l\u00e4gger ocks\u00e5 till det \u00f6verordnade formul\u00e4rets klassnamn f\u00f6r att ytterligare begr\u00e4nsa det s\u00e5 att vi inte riskerar att autoslutf\u00f6rande till\u00e4mpas p\u00e5 n\u00e5got annat med samma klass.<\/p>\n
Enligt autokompletteringsdokumentationen kan vi utf\u00f6ra ett AJAX-anrop i fastigheten source<\/code>(som m\u00e5ste returnera en rad objekt f\u00f6r att visas i autoslutf\u00f6randet). Vi kommer att anv\u00e4nda jQuerys Ajax-funktion<\/a> f\u00f6r att g\u00f6ra just det:<\/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
P\u00e5 raden #2<\/code>talar vi om f\u00f6r jQuery UI Autocomplete vilket inmatningsf\u00e4lt vi vill anv\u00e4nda autocomplete p\u00e5. \u00c4ndra denna v\u00e4ljare s\u00e5 att den passar dina behov.<\/p>\n
I den enklaste formen f\u00f6rv\u00e4ntar sig Autocomplete en array av objektobjekt till source<\/code>egenskapen. H\u00e4r skapar vi en funktion med tv\u00e5 parametrar; request<\/code>inneh\u00e5ller information om v\u00e5rt inmatade v\u00e4rde (request.term<\/code>), och response<\/code>som \u00e4r en \u00e5teruppringningsfunktion vi beh\u00f6ver f\u00f6r att anropa och tillhandah\u00e5lla data. Det \u00e4r vad vi g\u00f6r i AJAX:s success<\/code>funktion vid linje #13<\/code>.<\/p>\n
AJAX-anropet i sig \u00e4r ganska standard. Vi definierar datatypen som JSON \u2013 detta \u00e4r viktigt annars kommer jQuery UI Autocomplete inte att kunna analysera resultaten. N\u00e4r url<\/code>vi kommer \u00e5t ajax_url<\/code>i den globala variabeln lokaliserade vi till v\u00e5rt skript tidigare; AutocompleteSearch<\/code>. Och n\u00e4r data<\/code>vi passerar ett informationsobjekt. Egenskapen action<\/code>\u00e4r obligatorisk och n\u00f6dv\u00e4ndig f\u00f6r n\u00e4sta steg \u2013 som \u00e4r att identifiera denna specifika AJAX-f\u00f6rfr\u00e5gan i PHP. Vi vidarebefordrar ocks\u00e5 den inmatade termen i ing\u00e5ngen och nonce av s\u00e4kerhetssk\u00e4l.<\/p>\n
Det \u00e4r det f\u00f6r sources<\/code>fastigheten. Det finns en annan sak vi beh\u00f6ver l\u00e4gga till i v\u00e5rt autoslutf\u00f6randeskript. Som standard i jQuery UI Autocomplete att v\u00e4lja ett objekt automatiskt fyller inmatningen med det valda elementet. Vi vill omdirigera anv\u00e4ndaren till inl\u00e4ggets URL n\u00e4r vi v\u00e4ljer ett objekt fr\u00e5n listan. S\u00e5 vi l\u00e4gger till en funktion till select<\/code>egenskapen:<\/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
I den array av objekt vi kommer tillbaka fr\u00e5n v\u00e5rt AJAX-anrop (vi kommer att skriva detta h\u00e4rn\u00e4st) \u00e4r varje objekt ett objekt med egenskaper. Vi kommer att l\u00e4gga till en anpassad link<\/code>egenskap f\u00f6r varje objekt (ui.item<\/code>) som kommer att inneh\u00e5lla permal\u00e4nkarna till varje inl\u00e4gg. Vi skickar denna URL till [window.location.href](https:\/\/www.w3schools.com\/js\/js_window_location.asp)<\/code>som kommer att utl\u00f6sa en webbl\u00e4saromdirigering.<\/p>\n
Och det \u00e4r allt f\u00f6r Javascript-delen! Allt som \u00e5terst\u00e5r \u00e4r att skriva PHP-delen som lyssnar p\u00e5 AJAX-f\u00f6rfr\u00e5gningar med \u00e5tg\u00e4rden autocompleteSearch<\/code>.<\/p>\n
Returnerar resultat i PHP till AJAX-f\u00f6rfr\u00e5gningar<\/h3>\n
F\u00f6r att skriva funktioner som svarar p\u00e5 specifika AJAX-f\u00f6rfr\u00e5gningar anv\u00e4nder vi krokarna wp_ajax_{action}<\/code>(inloggade bes\u00f6kare) och wp_ajax_nopriv_{action}<\/code>(icke-inloggade bes\u00f6kare). Vi definierade \u00e5tg\u00e4rden som autocompleteSearch<\/code>i v\u00e5r AJAX-f\u00f6rfr\u00e5gan ovan. Se mitt inl\u00e4gg som f\u00f6rklarar hur AJAX fungerar i WordPress<\/a> om du inte \u00e4r bekant med detta.<\/p>\n
L\u00e5t oss st\u00e4lla in detta i functions.php<\/code>(eller var du \u00e4n l\u00e4gger till din kod i PHP):<\/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
Med ovanst\u00e5ende kod kopplar vi samma funktion till de tv\u00e5 AJAX-krokarna. I alla funktioner som \u00e4r kopplade till wp_ajax AJAX-krokarna m\u00e5ste vi se till att alltid die()<\/code>eller exit<\/code>i slutet s\u00e5 att vi inte ekar ut o\u00f6nskad utdata. Jag anv\u00e4nder WordPress- [wp_die](https:\/\/developer.wordpress.org\/reference\/functions\/wp_die\/)()<\/code>funktionen.<\/p>\n
Vi kan h\u00e4mta skickad data fr\u00e5n Javascript med hj\u00e4lp av $_REQUEST<\/code>(fungerar f\u00f6r b\u00e5de GET- och POST-f\u00f6rfr\u00e5gningar). I v\u00e5r Javascript-kod passerade vi den inmatade termen i nyckeln ’ term<\/code>’. Det betyder att vi kan h\u00e4mta v\u00e4rdet av det i $_REQUEST['term']<\/code>. Vi kan sedan g\u00f6ra en f\u00f6rfr\u00e5gan utifr\u00e5n detta. Kom ih\u00e5g att vi bara vill returnera resultat som matchar denna s\u00f6kterm.<\/p>\n
Detta \u00e4r ytterligare en punkt d\u00e4r du helt kan \u00e4ndra och justera koden f\u00f6r att passa dina behov. Den h\u00e4r handledningen kommer att utf\u00f6ra en standardfr\u00e5ga p\u00e5 inl\u00e4gg och sidor, men du kan justera fr\u00e5gan eller utf\u00f6ra en helt annan fr\u00e5ga p\u00e5 olika data. Du kanske f\u00f6redrar eller beh\u00f6ver utf\u00f6ra en manuell SQL-fr\u00e5ga ist\u00e4llet (det \u00e4r s\u00e4kert mer minneseffektivt). Den avg\u00f6rande delen h\u00e4r \u00e4r arrayen som vi ekar i slutet, som tolkas av v\u00e5r Javascripts autokompletteringskod.<\/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
F\u00f6rst kontrollerar vi om nonce var giltig f\u00f6r att skapa viss s\u00e4kerhet p\u00e5 v\u00e5ra AJAX-samtal. Vi kan g\u00f6ra detta genom att anropa funktionen [check_ajax_referer](https:\/\/developer.wordpress.org\/reference\/functions\/check_ajax_referer\/)()<\/code>. Jag har ocks\u00e5 lagt till kod f\u00f6r att s\u00e4kerst\u00e4lla att vi inte utf\u00f6r en tung beg\u00e4ran om den returnerade s\u00f6ktermen var tom. Vi b\u00f6r d\u00e5 returnera en tom json-kodad array.<\/p>\n
Exempelkoden ovan utf\u00f6r en [WP_Query](https:\/\/developer.wordpress.org\/reference\/classes\/wp_query\/)<\/code>med en s\u00f6kning p\u00e5 den inmatade termen. Vi m\u00e5ste st\u00e4lla in posts_per_page<\/code>som -1<\/code>f\u00f6r att s\u00e4kerst\u00e4lla att vi ger tillbaka alla matcher. Kolla i dokumentationen WP_Query<\/code>om du vill finjustera fr\u00e5gan ytterligare.<\/p>\n
Vi g\u00e5r sedan igenom resultaten (line #17<\/code>) och fyller i en array med matchningar (line #19-23<\/code>). jQuery UI Autocomplete beh\u00f6ver som minimum v\u00e4rdet label<\/code>f\u00f6r att ange vad som ska visas i autocomplete-rutan. Vi skickar \u00e4ven vidare permal\u00e4nkar i nyckeln ’ link<\/code>’ som \u00e4r vad vi anv\u00e4nder i v\u00e5r Javascript-kod f\u00f6r att omdirigera anv\u00e4ndaren.<\/p>\n
Slutligen vid raden #27<\/code>ekar vi den genererade arrayen som JSON genom att anv\u00e4nda [json_encode](https:\/\/www.php.net\/manual\/en\/function.json-encode.php)()<\/code>.<\/p>\n
Med denna PHP-del p\u00e5 plats borde v\u00e5r autokomplettering fungera! Uppdatera din webbplats och testa!<\/p>\n
Valfria f\u00f6rb\u00e4ttringar<\/h2>\n
Ett vanligt problem \u00e4r att antalet matchningar \u00e4r f\u00f6r m\u00e5nga och att autokompletteringsrutan blir f\u00f6r stor. Det finns tv\u00e5 l\u00f6sningar p\u00e5 detta.<\/p>\n
En l\u00f6sning \u00e4r att l\u00e4gga till egenskapen minLength<\/code>i autocomplete()<\/code>funktionen i Javascript. Den h\u00e4r egenskapen kommer bara att utl\u00f6sa rutan f\u00f6r autoslutf\u00f6rande efter att ett visst antal tecken har matats in. Som ett exempel kan vi kr\u00e4va minst 3 tecken innan autoslutf\u00f6rande utl\u00f6ses:<\/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 f\u00f6resl\u00e5r en annan l\u00f6sning h\u00e4r<\/a>. Den visar ett exempel p\u00e5 att l\u00e4gga till lite CSS f\u00f6r att l\u00e4gga till en fast h\u00f6jd och en intern rullningslist i autokompletteringsrutan.<\/p>\n
Slutsats och fullst\u00e4ndig kod<\/h2>\n
Vi har framg\u00e5ngsrikt lagt till ett autoslutf\u00f6rande i WordPresss s\u00f6kfunktion d\u00e4r vi har full kontroll \u00f6ver de matchningar som ska returneras. Det ger bes\u00f6karna ett snabbare s\u00e4tt att navigera i ditt inneh\u00e5ll eftersom att klicka p\u00e5 en matchning omdirigeras direkt till inl\u00e4gget, snarare \u00e4n att ta en omv\u00e4g p\u00e5 en s\u00f6kresultatsida f\u00f6rst. Att implementera ett autoslutf\u00f6rande kanske inte alltid \u00e4r vettigt p\u00e5 alla WordPress-webbplatser, men det kan vara bra f\u00f6r att s\u00f6ka efter specifikt inneh\u00e5ll eller inom speciella mallar!<\/p>\n
H\u00e4r \u00e4r den slutliga koden i sin helhet:<\/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
Inspelningsk\u00e4lla:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Den h\u00e4r handledningen \u00e4r f\u00f6r dig som vill implementera en autoslutf\u00f6randes\u00f6kning i WordPress, d\u00e4r vi har full kontroll \u00f6ver de returnerade matchningarna.<\/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":[901,724,838,848,901,1110,807,807,838,848,724,868,868],"tags":[1173],"class_list":["post-233335","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-koda","category-utvecklaren","category-guide-foer-nyboerjare","category-handledningar","category-n-a","category-php-9","category-wordpress-9","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/233335","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/comments?post=233335"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/233335\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/224845"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=233335"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=233335"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=233335"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}