Einer meiner Kunden wollte für die Suche in den Dokumentationen (Custom Post Type) eine Autocomplete-Lösung. Ich habe vorher nie mit jQuery UI Autocomplete gearbeitet und musste mich erst ein wenig einlesen. Dabei ist mir aufgefallen das jQuery UI Autocomplete am einfachsten mit dem Dateiformat JSON funktioniert. Hier findest du meine WordPress Lösung dazu.

Die einfachste und schnellste Möglichkeit die WordPress Beiträge in ein JSON-Format zu packen ist es ein Page-Template zu erstellen, um dort eigene Header und Queries definieren zu können.

WordPress Template erstellen

Ein kleines Beispiel:

<?php
/**
 * Template Name: Blog JSON
 */

$json = [];

$args = [
  'post_type'       => 'post',
  'post_status'     => 'publish', 
  'posts_per_page'  => -1,
];

$posts = new WP_Query( $args );

if ( $posts->have_posts() ) {

	while ( $posts->have_posts() ) :
		$posts->the_post();

		$json[] = [
			'value' => html_entity_decode( get_the_title() ),
			'url'   => get_the_permalink(),
		];

	endwhile;

	wp_reset_postdata();  
}
 
header( 'Content-type: application/json' );
wp_send_json( $json );Code-Sprache: HTML, XML (xml)

Weisen wir das Template jetzt einer angelegten WordPress Seite im wp-admin zu, werden die Beiträge im JSON ausgegeben. Zumindest der benötigte Titel und der Permalink.

Durch die Zuweisung an eine WordPress Seite haben wir auch direkt einen Link, den wir dann in unseren AJAX-Request für’s Autocomplete verwenden können.

Autocomplete Script

Wie das aussehen könnte, zeigt das Beispiel hier:

(function ($) {
	// prüfe ob #search-form existiert 
	if ($('#search-form').length) {
		// deine json url   
		var json_url = 'deine-domain.de/json/';
		var availableTags = (function () {
			var json = null;
			
			$.ajax({
				'async': false,
				'global': false,
				'url': json_url,
				'dataType': "json",
				'success': function (response) {
					json = response;
				}
			});

			return json;
		})();
		
		$(function () {
			$('#search-string').autocomplete({
				source: availableTags,
				minLength: 0,
				select: function (event, ui) {
					$(this).val(''); /* input value leeren */
					$('#search-form').attr("action", ui.item.url); /* form action zuweisen */
					$('#search-form').submit(); /* form absenden */
				}
			});
			
			$.ui.autocomplete.prototype._resizeMenu = function () {
				var ul = this.menu.element;
				
				ul.outerWidth(this.element.outerWidth());
			};
		});
	}
})(jQuery);Code-Sprache: JavaScript (javascript)

Vergiss nicht jQuery UI oder jQuery UI Autocomplete einzubinden, da es sonst nicht funktioniert.