{"id":1127,"date":"2018-04-23T12:25:58","date_gmt":"2018-04-23T10:25:58","guid":{"rendered":"http:\/\/evileu.de\/zum-schwarzen-pinguin\/?p=1127"},"modified":"2018-04-23T12:25:58","modified_gmt":"2018-04-23T10:25:58","slug":"wordpress-autocomplete-ajax-deutsch-uebersetzung-des-tutorials-von-david-nash","status":"publish","type":"post","link":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/2018\/04\/23\/wordpress-autocomplete-ajax-deutsch-uebersetzung-des-tutorials-von-david-nash\/","title":{"rendered":"WordPress Autocomplete AJAX deutsch – \u00dcbersetzung des Tutorials von David Nash"},"content":{"rendered":"

\u00dcbersetzung des Tutorials von David Nash<\/h2>\n

Wie ich im vorigen Artikel schon erw\u00e4hnt hatte, hat David Nash in seinem Blog ein tolles Tutorial \u00fcber Autocomplete<\/a> (Auto-Vervollst\u00e4ndigen) mit Hilfe von AJAX in WordPress geschrieben. Ich habe von David die Erlaubnis, es zu \u00fcbersetzen und auf dieser Seite zur Verf\u00fcgung zu stellen. Das mache ich doch mit dem gr\u00f6ssten Vergn\u00fcgen – viel Spa\u00df beim Nachbauen, und viel Erfolg!<\/p>\n

Einleitung<\/h2>\n

Dies wurde f\u00fcr ein Projekt mit einer umfangreichen Datenbank realisiert, mit ca. 14.000 eingetragenen Gesch\u00e4ftsadressen. Es gibt eine Anmeldungsseite, auf der die Benutzer ausw\u00e4hlen k\u00f6nnen, f\u00fcr welche Firma sie arbeiten. 14.000 sind viel zu viele Optionen f\u00fcr ein SELECT (drop-down) Feld, und ich wollte auch nicht so viel Last auf der MySQL Datenbank erzeugen.<\/p>\n

Meine L\u00f6sung: ein Autocomplete-Textfeld, das die WordPress-Datenbank ausliest.<\/p>\n

Ich gehe schrittweise vor, und stelle sicher dass jeder Schritt korrekt l\u00e4uft, ehe ich den n\u00e4chsten beginne. Hier ist das schrittweise Vorgehen:<\/p>\n

Front-End JavaScript<\/h3>\n

Wir benutzen ein Child-Theme, weil wir ein Premium-Theme anpassen. In die functions.php kommt folgender Code, um die JavaScript-Datei zu laden:<\/p>\n

\n
\n\n\n\n
\n
\n
function<\/span> mysite_js<\/span>(<\/span>)<\/span> {<\/span><\/div>\n
wp_enqueue_script<\/span>(<\/span>‚mysite-js‘<\/span>,<\/span> get_stylesheet_directory_uri<\/span>(<\/span>)<\/span>.<\/span>‚\/js\/mysite.js‘<\/span>,<\/span> array<\/span>(<\/span>‚jquery‘<\/span>)<\/span>)<\/span>;<\/span><\/div>\n
}<\/span><\/div>\n
add_action<\/span>(<\/span>‚wp_enqueue_scripts‘<\/span>,<\/span> ‚mysite_js‘<\/span>)<\/span>;<\/span><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n
<\/div>\n
Wir legen im Child-Theme Verzeichnis die Datei \/js\/mysite.js an, die sieht so aus:<\/div>\n
<\/div>\n
\n
\n\n\n\n
\n
\n
jQuery<\/span>(<\/span>document<\/span>)<\/span>.<\/span>ready<\/span>(<\/span>function<\/span>(<\/span>$<\/span>)<\/span> {<\/span><\/div>\n
alert<\/span>(<\/span>‚jQuery loaded.‘<\/span>)<\/span>;<\/span><\/div>\n
}<\/span>)<\/span>;<\/span><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

Wenn man jetzt irgendeine Seite auf der Site neu l\u00e4dt, kommt „jQuery loaded“ in einer JavaScript-Alertbox, das funktioniert also. Man h\u00e4tte auch console.log(\u2018hello\u2019) benutzen und die Developer Console in Chrome \u00fcberp\u00fcfen k\u00f6nnen.<\/p>\n

Als n\u00e4chstes habe ich mir jQuery-autocomplete<\/a> heruntergeladen. Ich h\u00e4tte auch das jQuery-UI autocomplete benutzen k\u00f6nnen, aber ich benutze es sonst nicht und belasse die Sache lieber leichtgewichtig.<\/p>\n

Aus dem Download kopiere ich mir die Dateien jquery.auto-complete.css und jquery-autocomplete.js nach \/js\/ \u2013 das selbe Unterverzeichnis, in dem mysite.js liegt.<\/p>\n

Dann wird die functions.php angepasst um die Bibliothek zu laden:<\/p>\n

function<\/span> mysite_js<\/span>(<\/span>)<\/span> {<\/span>\r\n\r\nwp_enqueue_script<\/span>(<\/span>'autocomplete'<\/span>,<\/span> get_stylesheet_directory_uri<\/span>(<\/span>)<\/span>.<\/span>'\/js\/jquery.auto-complete.js'<\/span>,<\/span> array<\/span>(<\/span>'jquery'<\/span>)<\/span>)<\/span>;<\/span>\u00a0\r\n\r\nwp_enqueue_script<\/span>(<\/span>'mysite-js'<\/span>,<\/span> get_stylesheet_directory_uri<\/span>(<\/span>)<\/span>.<\/span>'\/js\/mysite.js'<\/span>,<\/span> array<\/span>(<\/span>'jquery'<\/span>,<\/span> 'autocomplete'<\/span>)<\/span>)<\/span>;<\/span>\u00a0\r\n\r\nwp_enqueue_style<\/span>(<\/span>'autocomplete.css'<\/span>,<\/span> get_stylesheet_directory_uri<\/span>(<\/span>)<\/span>.<\/span>'\/js\/jquery.auto-complete.css'<\/span>)<\/span>;<\/span>\r\n}<\/span>\r\n\r\nadd_action<\/span>(<\/span>'wp_enqueue_scripts'<\/span>,<\/span> 'mysite_js'<\/span>)<\/span>;<\/span><\/pre>\n
Jetzt die Seite neu laden, und sicherstellen dass die Library in der Chrome Developer Console unter dem „Sources“-Tab auftaucht.<\/p>\n
Der AJAX Code<\/h2>\n
Als n\u00e4chstes wird die mysite.js upgedatet, um etwas sinnvolles zu tun:<\/p>\n
jQuery<\/span>(<\/span>document<\/span>)<\/span>.<\/span>ready<\/span>(<\/span>function<\/span>(<\/span>$<\/span>)<\/span> {<\/span>\u00a0\r\n\r\n$<\/span>(<\/span>'#company_works_at'<\/span>)<\/span>.<\/span>autoComplete<\/span>(<\/span>{<\/span>\r\nsource<\/span>:<\/span> function<\/span>(<\/span>name<\/span>,<\/span> response<\/span>)<\/span> {\r\n<\/span>\r\n$<\/span>.<\/span>ajax<\/span>(<\/span>{<\/span>\r\ntype<\/span>:<\/span> 'POST'<\/span>,<\/span>\r\ndataType<\/span>:<\/span> 'json'<\/span>,<\/span>\r\nurl<\/span>:<\/span> '\/wp-admin\/admin-ajax.php'<\/span>,<\/span>\r\ndata<\/span>:<\/span> 'action=get_listing_names&name='<\/span>+<\/span>name<\/span>,<\/span>\r\nsuccess<\/span>:<\/span> function<\/span>(<\/span>data<\/span>)<\/span> {\r\n<\/span>\r\nresponse<\/span>(<\/span>data<\/span>)<\/span>;<\/span>\r\n\r\n}<\/span>\r\n\r\n}<\/span>)<\/span>;<\/span>\r\n\r\n}<\/span>\r\n}<\/span>)<\/span>;<\/span>\r\n}<\/span>)<\/span>;<\/span><\/pre>\n
Dabei ist #company_works_at das Textfeld auf der Registrierungsseite, das den Autocomplete bekommen soll. Ich bin dabei der Dokumentation auf der Autocomplete-Seite gefolgt – die Source-Funktion braucht ein „response“-Callback um zu funktionieren, dies ist die „success“-Funktion im Aufruf von jQuery $.ajax().
\n<\/span><\/p>\n
Das PHP, das die AJAX Daten von WordPress schickt<\/h3>\n
In der functions.php kommt Folgendes hinzu:<\/p>\n
\/\/get listings for 'works at' on submit listing page<\/span>\r\n\r\nadd_action<\/span>(<\/span>'wp_ajax_nopriv_get_listing_names'<\/span>,<\/span> 'ajax_listings'<\/span>)<\/span>;<\/span>\r\nadd_action<\/span>(<\/span>'wp_ajax_get_listing_names'<\/span>,<\/span> 'ajax_listings'<\/span>)<\/span>;<\/span>\r\n\r\nfunction<\/span> ajax_listings<\/span>(<\/span>)<\/span> {<\/span>\r\n\r\nglobal<\/span> $wpdb<\/span>;<\/span> \/\/get access to the WordPress database object variable<\/span>\r\n\r\n\/\/get names of all businesses<\/span>\r\n\r\n$name<\/span> =<\/span> $wpdb<\/span>-><\/span>esc_like<\/span>(<\/span>stripslashes<\/span>(<\/span>$_POST<\/span>[<\/span>'name'<\/span>]<\/span>)<\/span>)<\/span>.<\/span>'%'<\/span>;<\/span> \/\/escape for use in LIKE statement<\/span>\r\n\r\n$sql<\/span> =<\/span> \"select post_title <\/span>\r\n\r\n from $wpdb->posts <\/span>\r\n\r\n where post_title like %s <\/span>\r\n\r\n and post_type='job_listing' and post_status='publish'\"<\/span>;<\/span> \r\n\r\n$sql<\/span> =<\/span> $wpdb<\/span>-><\/span>prepare<\/span>(<\/span>$sql<\/span>,<\/span> $name<\/span>)<\/span>;<\/span>\r\n\r\n$results<\/span> =<\/span> $wpdb<\/span>-><\/span>get_results<\/span>(<\/span>$sql<\/span>)<\/span>;<\/span> \r\n\r\n\/\/copy the business titles to a simple array<\/span>\r\n\r\n$titles<\/span> =<\/span> array<\/span>(<\/span>)<\/span>;<\/span>\r\n\r\nforeach<\/span>(<\/span> $results<\/span> as<\/span> $r<\/span> )<\/span>\r\n\r\n$titles<\/span>[<\/span>]<\/span> =<\/span> addslashes<\/span>(<\/span>$r<\/span>-><\/span>post_title<\/span>)<\/span>;<\/span>\u00a0\r\n\r\necho<\/span> json_encode<\/span>(<\/span>$titles<\/span>)<\/span>;<\/span> \/\/encode into JSON format and output<\/span>\u00a0\r\n\r\ndie<\/span>(<\/span>)<\/span>;<\/span> \/\/stop \"0\" from being output<\/span>\r\n\r\n}<\/span><\/pre>\n
Das JavaScript, das den AJAX Call absetzt schickt die Daten in „name“. Ich benutze stripslashes() damit Namen mit Apostrophen etc. auch funtionieren. Ich benutze esc_like() aus Sicherheitsgr\u00fcnden. Das ‚%‘ am Ende bewirkt, dass nur auf die f\u00fchrenden Buchstaben gematcht wird. Wenn zum Beipsiel ein Benutzer „The“ eingibt m\u00f6chte ich „The Best Business“ sehen, und nicht „Not the best business“. Aber wenn „Not“ einegegeben wird, m\u00f6chte ich „Not the best business“ sehen.<\/p>\n
Update: <\/strong>Wenn man alle Posts sehen will, das „and<\/span>\u00a0<\/span>post_type=‚job_listing'“<\/span><\/span><\/span> aus dem $sql oben entfernen.<\/p>\n
Testen, ob es funktioniert<\/h2>\n
Ich klicke auf das Autocomplete-Feld, tippe drei Buchstaben und bekomme eine ziemlich rasche Reaktion. Es schl\u00e4gt mehrere Firmen vor, aus denen der Benutzer ausw\u00e4hlen kann.<\/p>\n
Dies ist nur ein Textfeld, und es erlaubt es dem Benutzer auch einen Namen einer Firma einzugeben, die nicht in der Datenbank ist. Wenn man m\u00f6chte k\u00f6nnte man mehr Restriktionen anlegen, und statt dem Text auch die ID der Firma speichern. Man k\u00f6nnte dann auch in einem anderen Template einen Link auf die Firma einf\u00fcgen.<\/p>\n
Das war’s – so sollte es es klappen<\/h2>\n
Soweit das Tutorial von David Nash. Hier noch einmal der Link zu seinem Blog<\/a>. Es lohnt sich, dort auch einmal durch die Kommentare durchzuschauen, da sind noch viele wertvolle Tipps drin.<\/p>\n
 <\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
\u00dcbersetzung des Tutorials von David Nash Wie ich im vorigen Artikel schon erw\u00e4hnt hatte, hat David Nash in seinem Blog ein tolles Tutorial \u00fcber Autocomplete (Auto-Vervollst\u00e4ndigen) mit Hilfe von AJAX in WordPress geschrieben. Ich habe von David die Erlaubnis, es zu \u00fcbersetzen und auf dieser Seite zur Verf\u00fcgung zu stellen. Das mache ich doch mit […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[46,7,4,2],"tags":[],"_links":{"self":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/1127"}],"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=1127"}],"version-history":[{"count":5,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/1127\/revisions"}],"predecessor-version":[{"id":1132,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/1127\/revisions\/1132"}],"wp:attachment":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/media?parent=1127"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/categories?post=1127"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/tags?post=1127"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}