{"id":1114,"date":"2018-04-14T15:50:32","date_gmt":"2018-04-14T13:50:32","guid":{"rendered":"http:\/\/evileu.de\/zum-schwarzen-pinguin\/?p=1114"},"modified":"2018-04-14T18:03:19","modified_gmt":"2018-04-14T16:03:19","slug":"wordpress-und-ajax-fuer-autocomplete-eine-erste-annaeherung","status":"publish","type":"post","link":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/2018\/04\/14\/wordpress-und-ajax-fuer-autocomplete-eine-erste-annaeherung\/","title":{"rendered":"WordPress und AJAX f\u00fcr Autocomplete – eine erste Ann\u00e4herung"},"content":{"rendered":"

Einleitung<\/h2>\n

Ich hab mich k\u00fcrzlich in einem Projekt mal ein bisschen mit den Grundlagen von AJAX besch\u00e4ftigt, und finde es bietet wirklich faszinierende und in der Praxis gut anwendbare M\u00f6glichkeiten. Besonders g’wandt ist die M\u00f6glichkeit, zum Suchen bestimmter Datenbankeintr\u00e4ge ein Autocomplete oder Auto-Vervollst\u00e4ndigen einzubauen. Der Benutzer tippt ein paar Buchstaben (in der Regel drei) in ein Textfeld ein, und man holt via AJAX die gematchten Eintr\u00e4ge aus der Datenbank. Das, so hab ich mir gedacht, h\u00e4tte ich gerne f\u00fcr eine komfortable Suche nach Rezepten im Inselfisch-Kochbuch, das sind n\u00e4mlich mittlerweile \u00fcber dreihundert und somit zuviel f\u00fcr ein Dropdown-Feld. Das k\u00f6nnte in etwa so aussehen:<\/p>\n

\"form_leer\"

form_leer<\/p><\/div>\n

Man stellt ein kleines Formular zur Verf\u00fcgung, in das der Benutzer Text eingeben kann. Sobald in der Datenbank passende Eintr\u00e4ge gefunden werden, werden diese als Auswahlliste angezeigt. Ich geb mal sal<\/strong> ein, hier ist das Ergebnis:<\/p>\n

\"suche_sal\"

suche_sal<\/p><\/div>\n

Das ist doch schon mal ganz schick, oder? Und nicht \u00fcber die Nummern (#152) wundern, die brauchen wir sp\u00e4ter noch. Wenn der Benutzer einen Eintrag ausgew\u00e4hlt hat und auf Return dr\u00fcckt, soll dann das Rezept angezeigt werden, aber bis dahin ist es noch ein St\u00fcckchen weit. WordPress stellt n\u00e4mlich eine ganz eigene Logik f\u00fcr die Verwendung von AJAX zur Verf\u00fcgung, und die ist ein bisschen widerborstig. Aber professionelle Hilfe ist geboten:<\/p>\n

Super Tutorial zum Thema<\/h2>\n

…von David Nash: https:\/\/davidnash.com.au\/create-an-auto-complete-field-in-wordpress\/<\/a><\/p>\n

David erkl\u00e4rt wirklich Step by Step und fantastisch nachvollziehbar, auf was es ankommt. Das kann sich wirklich jeder selber reinziehen, das funktioniert direkt auf Anhieb.<\/p>\n

Ben\u00f6tigtes Helferlein: jquery autocomplete<\/h2>\n

Kann man sich hier herunterladen: https:\/\/goodies.pixabay.com\/jquery\/auto-complete\/demo.html<\/a><\/p>\n

Man braucht nur die beiden Dateien jquery.auto-complete.css und jquery-autocomplete.js.<\/p>\n

Kleine Erg\u00e4nzungen zu Davids Tutorial<\/h2>\n

Das Eingabeformular<\/h3>\n

Um das Ganze auch ausprobieren zu k\u00f6nnen, braucht man nat\u00fcrlich ein Eingabeformular. Ich hab eins als Shortcode angelegt, da sieht in meiner functions.php so aus:<\/p>\n

\u00a0function auto_form(){\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0echo \"<h3>Beispiel Rezeptsuche Autocomplete<\/h3>\";\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0echo \"<form action='#' method='post'>\";\r\n\u00a0\u00a0 \u00a0echo \"<input type='text' size='40' name = 'auswahl' id = 'rezepte_auswahl<\/span>'>\";\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0echo \"<\/form>\";\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0if (isset($_POST['auswahl'])){\r\n\u00a0\u00a0 \u00a0echo \"Vielen Dank! Ihre Auswahl :\".$_POST['auswahl'].\"<br>\";\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \r\n\u00a0\u00a0 \u00a0} \/\/end if isset\r\n\u00a0}\r\n\u00a0add_shortcode('a_form', 'auto_form');<\/pre>\n
Wichtig ist hier die id des Eingabefeldes<\/span>, die wird dann in unserer js-Datei referenziert:<\/p>\n
jQuery(document).ready(function($) {\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0$('#rezepte_auswahl<\/span>').autoComplete({\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0source: function(name, response) {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$.ajax({\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0type: 'POST',\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0dataType: 'json',\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0url: '\/wordpress\/wp-admin\/admin-ajax.php'<\/span>,\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0data: 'action=get_listing_names&name='+name,\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0success: function(data) {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0response(data);\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0});\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0});\r\n\u00a0\r\n});<\/pre>\n
Wichtig ist hier auch die URL der admin-ajax.php<\/span>, die muss man gegebenenfalls anpassen.<\/p>\n
Nachtrag: ich hab mir eine andere L\u00f6sung ergooglet<\/h3>\n
Man kann mithilfe der WordPress-Funktion wp_localize_script() den Pfad zum Admin-Verzeichnis als Variable an das Script \u00fcbergeben. Dazu erg\u00e4nzt man die function mysite_js() wie folgt:<\/p>\n
function mysite_js() {\r\n\u00a0\u00a0 \u00a0wp_enqueue_script('autocomplete', get_stylesheet_directory_uri().'\/js\/jquery.auto-complete.js', array('jquery'), false, false);\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0wp_enqueue_script('mysite-js', get_stylesheet_directory_uri().'\/js\/mysite.js', array('jquery', 'autocomplete'), false, false);\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0wp_localize_script( 'mysite-js', 'my_ajaxurl<\/span>', admin_url( 'admin-ajax.php' ) );<\/span>\r\n\u00a0\r\n\u00a0\u00a0 \u00a0wp_enqueue_style('autocomplete.css', get_stylesheet_directory_uri().'\/js\/jquery.auto-complete.css');\r\n\u00a0\r\n}\r\nadd_action('wp_enqueue_scripts', 'mysite_js');<\/pre>\n
Dann kann man im Script mysite.js f\u00fcr die URL einfach die Variable my_ajaxurl einsetzen:<\/p>\n
jQuery(document).ready(function($) {\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0$('#rezepte_auswahl').autoComplete({\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0source: function(name, response) {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$.ajax({\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0type: 'POST',\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0dataType: 'json',\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0url: my_ajaxurl<\/span>,\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/url: '\/wordpress\/wp-admin\/admin-ajax.php',\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0data: 'action=get_listing_names&name='+name,\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0success: function(data) {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0response(data);\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0});\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0});\r\n\u00a0\r\n});<\/pre>\n
Das aber nur als kleiner Tipp am Rande.<\/p>\n
Ich hole mir noch die Post-ID<\/h3>\n
Dazu passe ich die Funktion ajax_listings() ein bisschen an:<\/p>\n
function ajax_listings() {\r\n\u00a0\u00a0 \u00a0global $wpdb; \/\/get access to the WordPress database object variable\r\n\u00a0\r\n\u00a0\u00a0 \u00a0\/\/get names of all businesses\r\n\u00a0\u00a0 \u00a0$name = $wpdb->esc_like(stripslashes($_POST['name'])).'%'; \/\/escape for use in LIKE statement\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0$sql = \"select post_title, ID<\/span> \r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0from $wpdb->posts \r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0where post_title like %s \r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0and post_type='post' and post_status='publish'\";\r\n\u00a0\r\n\u00a0\u00a0 \u00a0$sql = $wpdb->prepare($sql, $name);\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0$results = $wpdb->get_results($sql);\r\n\u00a0\r\n\u00a0\u00a0 \u00a0\/\/copy the business titles to a simple array\r\n\u00a0\u00a0 \u00a0$titles = array();\r\n\u00a0\u00a0 \u00a0foreach( $results as $r )\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$titles[] = addslashes($r->post_title.\" #\".$r->ID<\/span>);\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0echo json_encode($titles); \/\/encode into JSON format and output\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0die(); \/\/stop \"0\" from being output\r\n}<\/pre>\n
In den Select kommt noch die ID mit rein, und die h\u00e4nge ich in der Foreach-Schleife auch noch mit an die Ausgabe dran, mit einem # vorneweg.<\/p>\n
Extrahieren der ID im Formular<\/h3>\n
Wenn der Benutzer einen Listeneintrag ausgew\u00e4hlt und auf Return gedr\u00fcckt hat, soll ja etwas passieren: n\u00e4mlich das gew\u00e4hlte Rezept ausgegeben werden. Das „Return-Dr\u00fccken“ erwischt man mit einem If (ISSET…), dann zerlege ich mir die entsprechende Variable und hole mir nur die Zahl nach dem #.<\/p>\n
function auto_form(){\r\n\u00a0\u00a0 \u00a0echo \"<a name='form'><\/a>\"; \r\n\u00a0\u00a0 \u00a0echo \"<h3>Beispiel Rezeptsuche Autocomplete<\/h3>\";\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0echo \"<form action='#form' method='post'>\";\r\n\u00a0\u00a0 \u00a0echo \"<input type='text' size='40' name = 'auswahl<\/span>' id = 'rezepte_auswahl'>\";\r\n\u00a0\u00a0 \r\n\u00a0\u00a0 \u00a0echo \"<\/form>\";\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0if (isset($_POST['auswahl']<\/span>)){\r\n\u00a0\u00a0 \u00a0echo \"Vielen Dank! Ihre Auswahl :\".$_POST['auswahl'].\"<br>\";\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\/\/***********Action<\/span>\r\n\u00a0\u00a0 \u00a0$text = strstr($_POST['auswahl']<\/span>, '#');\r\n\u00a0\u00a0 \u00a0$text=substr($text,1); \r\n\u00a0\u00a0 \u00a0echo \"Ich bin die Nummer \".$text;\r\n\u00a0\u00a0 \u00a0\/\/\/*****end Action<\/span>\r\n\u00a0\u00a0 \u00a0} \/\/end if isset\r\n\u00a0}<\/pre>\n
Jetzt liegt die ID des gew\u00e4hlten Rezeptes auf der Variablen $text, mit der arbeiten wir weiter und geben einfach den post_content aus:<\/p>\n
global $wpdb;\r\n\u00a0\u00a0 \u00a0$sql = \"select post_content, ID \r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0from $wpdb->posts \r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0where ID like \".$text.<\/span>\" \r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\";\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0$results = $wpdb->get_results($sql);\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0foreach ($results as $r){echo $r->post_content<\/span>;}<\/pre>\n
Damit wird das Rezept angezeigt, sobald der Benutzer seine Auswahl getroffen und auf Return gedr\u00fcckt hat:<\/p>\n
\"salatbowle\"
salatbowle<\/p><\/div>\n
Man k\u00f6nnte nat\u00fcrlich auch einen Link zum Rezept einbauen, aber ich lasse es mal so, dann muss der Benutzer nicht woanders hin wechseln, wenn er noch ein Rezept suchen m\u00f6chte.<\/p>\n
Man k\u00f6nnte auch noch die Suche ein bisschen in der Funktionalit\u00e4t ver\u00e4ndern, wenn man zum Beispiel nicht nur nach Eintr\u00e4gen suchen m\u00f6chte, die mit der eingegebenen Zeichenfolge beginnen, sondern alle, in denen die Zeichenfolge enthalten ist. Dann kann man in der function ajax_listings() die Suchvariable einfach anpassen und die Wildcard % noch vornedran setzen:<\/p>\n
$name = '%'<\/span>.$wpdb->esc_like(stripslashes($_POST['name'])).'%';<\/pre>\n
Das findet z.B. alle Eintr\u00e4ge mit salat im Titel, auch nicht unpraktisch:<\/p>\n
\"instring_salat\"
instring_salat<\/p><\/div>\n
Alles in allem: eine superpraktische Funktionalit\u00e4t, und dank des grossartigen Tutorials von David Nash einfach umzusetzen. Gef\u00e4llt mir ausserordentlich gut!<\/p>\n
Kleiner Tipp am Ende:<\/h2>\n
Wenn es zwischendurch so aussieht, als ob WordPress die eigentlich geladenen js-Scripts nicht mehr kennt – Browsercache l\u00f6schen!<\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
Einleitung Ich hab mich k\u00fcrzlich in einem Projekt mal ein bisschen mit den Grundlagen von AJAX besch\u00e4ftigt, und finde es bietet wirklich faszinierende und in der Praxis gut anwendbare M\u00f6glichkeiten. Besonders g’wandt ist die M\u00f6glichkeit, zum Suchen bestimmter Datenbankeintr\u00e4ge ein Autocomplete oder Auto-Vervollst\u00e4ndigen einzubauen. Der Benutzer tippt ein paar Buchstaben (in der Regel drei) in […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[46,11,4,14,2],"tags":[],"_links":{"self":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/1114"}],"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=1114"}],"version-history":[{"count":8,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/1114\/revisions"}],"predecessor-version":[{"id":1126,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/1114\/revisions\/1126"}],"wp:attachment":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/media?parent=1114"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/categories?post=1114"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/tags?post=1114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}