{"id":1146,"date":"2018-05-02T17:42:20","date_gmt":"2018-05-02T15:42:20","guid":{"rendered":"http:\/\/evileu.de\/zum-schwarzen-pinguin\/?p=1146"},"modified":"2018-05-03T12:05:16","modified_gmt":"2018-05-03T10:05:16","slug":"wordpress-ajax-autocomplete-fuer-minimalisten","status":"publish","type":"post","link":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/2018\/05\/02\/wordpress-ajax-autocomplete-fuer-minimalisten\/","title":{"rendered":"WordPress AJAX Autocomplete f\u00fcr Minimalisten"},"content":{"rendered":"

Ich bin ja bekanntermassen ziemlich hartn\u00e4ckig, und obwohl ich die L\u00f6sung f\u00fcr das Autocomplete-Feld von David Nash toll finde, hats mir doch keine Ruhe gelassen. Das muss doch noch ein bisschen einfacher gehen, dachte ich mir und hab den Codex durchforstet. Zum Thema Using Ajax in Plugins<\/a> bin ich f\u00fcndig geworden, da stand doch ein (Codex-un\u00fcblich nachvollziehbares) Beispiel drin, \u00fcber das habe ich mich hergemacht. Das Javascript f\u00fcr den Ajax-Call wird hier nicht als externes Script enqueued, sondern in die Plugin-Datei integriert. Ist aber nicht schlimm, das Script ist n\u00e4mlich sehr \u00fcberschaubar – aber jetzt mal der Reihe nach.<\/p>\n

Die Vorgabe<\/h2>\n

Ich m\u00f6chte gern ein Textfeld, in das ich Suchbegriffe eingeben kann, und das soll mir dann aus der Datenbank alle Post Titles ausgeben, in denen der Suchbegriff vorkommt. Das soll etwa so aussehen:<\/p>\n

\"schoko\"

schoko<\/p><\/div>\n

Wir basteln uns ein Plugin<\/h2>\n

Nat\u00fcrlich brauchen wir dazu wieder ein Formular, und ich werde auch wieder die HTML5-Datalist verwenden. Wir packen das Ganze in ein Plugin, damit wir vom Theme unabh\u00e4ngig sind, und tun Formular und Javascript in einen Shortcode, damit wir das ganze in einem beliebigen Beitrag oder auf einer beliebigen Seite auch ausgeben k\u00f6nnen.<\/p>\n

Zuerst mal nur das Plugin ohne JScript und Ajax-Funktion:<\/p>\n

<?php\r\n\/*\r\nPlugin Name: WordPressAjax Testplugin\r\nPlugin URI: http:\/\/localhost\/wp_ajax\/wp-content\/plugins\/wp-ajax\r\nDescription: Zum Testen von Ajax mit WordPress\r\nVersion: 1.0\r\nAuthor: Evi Leu\r\nAuthor URI: http:\/\/www.evileu.de\r\n*\/\r\n\r\n\r\n\/*************************************************************\/\r\n\/\/*********Formular als Shortcode einbinden\r\n\u00a0function asuche(){\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0echo \"<input type = 'text' id = 'textfeld' autocomplete = 'off'\r\n onkeyup = 'myFunction(this.value);<\/span>' list = 'suchliste'<\/span>>\";\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0echo \"<datalist id='suchliste<\/span>'>\";\r\n\u00a0\u00a0 \u00a0echo \"<div id = 'liste'>\";\r\n\u00a0\u00a0 \u00a0echo \"<\/div>\";\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0echo \"<\/datalist>\";\r\n\u00a0\u00a0 \u00a0\r\n\u00a0}\r\n\u00a0add_shortcode('asuche', 'asuche');<\/pre>\n
Ich hab hier schon mal den Funktionsaufruf bei onkeyup mit drin, der kriegt als Parameter den Inhalt des Textfeldes mit, Script kommt gleich. Die Verbindung vom Textfeld zur Datalist geht \u00fcber die id suchliste. Autocomplete = ‚off‘ damit der Browser nicht reinpfuscht. In der Datalist hab ich eine weitere Div mit der id liste angelegt, in die schreibt nachher mein Ajax-Call seine R\u00fcckgabewerte.<\/p>\n
Das integrierte Javascript<\/h2>\n
Wie gesagt, das Scripterl ist so kurz, dass man es nicht in eine externe Datei auslagern muss, wir nehmen es in die Funktion asuche mit rein, das sieht dann so aus:<\/p>\n
function asuche(){ ?>\r\n\u00a0\u00a0 \u00a0 \r\n\u00a0\u00a0 \u00a0<script><\/span>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0function myFunction(wert){<\/span>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<\/span> \u00a0\u00a0\u00a0 \u00a0<\/span>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var aktwert = wert;<\/span><\/span>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var data = {<\/span>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0'action': 'my_action',<\/span>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0'whatever': aktwert<\/span><\/span>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<\/span>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0};<\/span>\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/ since 2.8 ajaxurl is always defined in the admin header and points to admin-ajax.php<\/span>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/ wir sind aber nicht auf den Admin-Pages, deswegen der volle Pfad<\/span>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0jQuery.post('http:\/\/localhost\/wp_ajax\/wp-admin\/admin-ajax.php', data, function(response) {<\/span><\/span>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/\u00a0\u00a0 \u00a0jQuery.post(ajaxurl, data, function(response) {<\/span>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<\/span>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0document.getElementById(\"liste\").innerHTML = response;<\/span>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<\/span>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0});<\/span>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0} \/\/*********************End myFunction<\/span>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<\/span>\r\n\u00a0\u00a0 \u00a0<\/script><\/span>\r\n\u00a0\u00a0 \u00a0<?php\r\n...<\/pre>\n
Was passiert hier? Zuerstmal wird der als Parameter \u00fcbergebene Wert des Textfeldes auf die Variable aktwert gelegt, diese kommt in die data-Parameter des Ajaxcalls mit rein. Der erste Parameter mit dem ‚action‘ definiert, welche Funktion nachher aufgerufen werden soll, die kommt gleich im Anschluss. Mit dem JQuery.post(…) wird die Anfrage an den admin-ajax.php weitergeleitet und die response definiert. Die macht nichts anderes als die Div mit der id liste mit dem R\u00fcckgabewert der aufgerufenen Funktion zu belegen, konkret f\u00fcllt sie die Options-Liste unserer Datalist.<\/p>\n
Was weniger sch\u00f6n ist: die Url zur admin-ajax.php steht hier noch als langer Rattenschwanz mit drin, das k\u00f6nnte man sicher sch\u00f6ner l\u00f6sen. Wenn man zum Beispiel das JQuery-Script auslagern und per enqueue laden w\u00fcrde, k\u00f6nnte man mit wp_localize_script den Pfad als Variable mitgeben – aber das sind jetzt schon Feinheiten.<\/p>\n
Damit der Funktionsaufruf klappt: Add Action<\/h2>\n
Ich habs zweimal drin, sowohl f\u00fcr die Admin-Ansicht als auch f\u00fcr nicht eingeloggte User:<\/p>\n
add_action( 'wp_ajax_my_action', 'my_action' );\r\nadd_action( 'wp_ajax_nopriv_my_action', 'my_action' );<\/pre>\n
Jetzt fehlt uns noch die tats\u00e4chliche Funktion, die den \u00dcbergebenen Parameter aktwert entgegennimmt und und die passenden\u00a0 Werte aus der Datenbank abruft.<\/p>\n
Die PHP-Funktion<\/h2>\n
Da wir uns im Kontext von WordPress bewegen, brauchen wir keinen externen Datenbankzugriff mit mysqli oder PDO, sondern k\u00f6nnen wie gewohnt mit dem $wpdb-Objekt arbeiten. Die Funktion sieht so aus:<\/p>\n
function my_action() {\r\n\u00a0\u00a0 \u00a0global $wpdb; \r\n\r\n\u00a0\u00a0 \u00a0$whatever = $_POST['whatever'];\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\/**********************************************\/\r\n\u00a0\u00a0 \u00a0$alleposts = $wpdb->get_results( \"SELECT * from \".$wpdb->prefix.\"posts \r\nwhere post_title like '%\".$whatever.\"%' \r\n\u00a0\u00a0 \u00a0and post_type like 'post' and post_status like 'publish'\");\r\n\u00a0\u00a0 \u00a0foreach($alleposts as $einpost){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0echo \"<option>\".$einpost->post_title.\"<\/option>\";\r\n}\r\n\u00a0\u00a0 \u00a0\/**********************************************\/\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0wp_die(); \/\/ this is required to terminate immediately and return a proper response\r\n} \/\/**********End function my_action<\/pre>\n
Unsere \u00fcbergebene Variable whatever wird nicht anders verarbeitet, als ob sie aus einem Formular direkt k\u00e4me, daf\u00fcr sorgt der Call mit dem jQuery.post(…). Der Rest ist wirklich simpel, ich suche mir aus der Tabelle wp_posts alle Eintr\u00e4ge, die unseren Suchbegriff matchen, gebe die gefundenen Post Titel mit der Foreach-Schleife aus und klebe noch die Option-Tags f\u00fcr unsere Datalist dran. Fertig ist unser Autocomplete-Feld!<\/span> <\/span><\/span><\/p>\n
\"suchwort_back\"
suchwort_back<\/p><\/div>\n
Nachtrag: JS ausgelagert und Pfad \u00fcbergeben<\/h2>\n
Wie ich oben schon angemerkt habe, ist es nicht so ideal dass im Javascript der volle Pfad zur admin-ajax.php steht. Das geht auch besser. Das Script kommt aus der Plugin-Datei raus, ich nenne es mal wp_ajax.js, und es sieht so aus:<\/p>\n
function myFunction(wert){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var aktwert = wert;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var data = {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0'action': 'my_action',\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0'whatever': aktwert\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0};\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/ der volle Pfad zur admin-ajax.php liegt auf my_ajaxurl\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0jQuery.post(my_ajaxurl<\/span>, data, function(response) {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0document.getElementById(\"liste\").innerHTML = response;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0});\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0} \/\/*********************End myFunction<\/pre>\n
Die Variable my_ajaxurl kriegt ihren Wert \u00fcber wp_localize_script, das geht in einem Aufwasch mit dem Einbinden der externen Javascript-Datei, dazu stellt man folgenden Code an den Anfang des Plugins:<\/p>\n
\/*********Externes Script einbinden und Pfad zur admin-ajax.php \u00fcbergeben*\/\r\nfunction mysite_js() {\r\n\u00a0\u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0 wp_enqueue_script('mysite-js', plugins_url().'\/wp_ajax\/wp_ajax.js<\/span>', array('jquery'), false, false);\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0 wp_localize_script( 'mysite-js', 'my_ajaxurl<\/span>', admin_url( 'admin-ajax.php'<\/span> ) );\r\n\u00a0\r\n\u00a0\u00a0 }\r\nadd_action('wp_enqueue_scripts', 'mysite_js');<\/pre>\n
Dann kann das JS aus der Plugindatei raus, das sorgt f\u00fcr mehr \u00dcbersicht und ist wesentlich eleganter gel\u00f6st.<\/p>\n
Was ich jetzt noch gern h\u00e4tte<\/h2>\n
Wenn man einen Rezepttitel angew\u00e4hlt und auf Return gedr\u00fcckt hat, m\u00f6chte ich gerne das gew\u00e4hlte Rezept anzeigen lassen. Aber dazu muss ich mir noch ein, zwei Gedanken machen, meine bisherige L\u00f6sung mit der angeh\u00e4ngten Rezept-ID ist n\u00e4mlich eine ziemliche Kr\u00fccke, das m\u00fcsste eleganter gehen. Ich geh mal forschen…. und daf\u00fcr gibts dann einen neuen Beitrag.<\/p>\n","protected":false},"excerpt":{"rendered":"
Ich bin ja bekanntermassen ziemlich hartn\u00e4ckig, und obwohl ich die L\u00f6sung f\u00fcr das Autocomplete-Feld von David Nash toll finde, hats mir doch keine Ruhe gelassen. Das muss doch noch ein bisschen einfacher gehen, dachte ich mir und hab den Codex durchforstet. Zum Thema Using Ajax in Plugins bin ich f\u00fcndig geworden, da stand doch ein […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[23,46,11,4,8,2],"tags":[],"_links":{"self":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/1146"}],"collection":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/comments?post=1146"}],"version-history":[{"count":7,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/1146\/revisions"}],"predecessor-version":[{"id":1155,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/1146\/revisions\/1155"}],"wp:attachment":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/media?parent=1146"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/categories?post=1146"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/tags?post=1146"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}