Wir bauen einen Autocompleter für WordPress Magic Fields

Sorry, this post only exists in german. I am looking for someone who wants to translate it.

In Onlineshops und Seiten, auf denen täglich viele Artikel gepostet werden, erspart der Einsatz eines Autocompleters viele Mühen. In vielen meiner Seiten verwende ich das glorreiche Tool “Magic Fields 2.0″ um mit Custom Fields zu arbeiten. Ich habe nun herausgefunden, wie sich der jQuery Autocompleter relativ einfach mit Magic Fields verknüpfen lässt. Hier meine Anleitung.

1. in unserem Theme benötigen wir eine neue Javascript-Datei, eine CSS-Datei und die “functions.php” des Themes.
2. Die Javascript-Datei nenne ich “adminJS.js” und die CSS-Datei “adminCSS.css”.
3. beginnen wir mit der adminJS.js:Zuerst lade ich das aktuelle Autocompleter jQuery Script von jQuery UI herunter. Wichtig, es reicht das Autocompleter script. Zusätzlich muss man core, widget und position herunter laden. Kopieren Sie nur das Autocompleter Script aus der heruntergeladenen JavaScript Datei heraus in die adminJS.js
4. Darunter schrieben wir unseren Code zum starten des Ajax Requests:

       //BMo Functions
       /*
       ---
       description: ...
       authors:
       - Benedikt Morschheuser (http://software.bmo-design.de) 2011
       requires:
       - jQuery
       */
       (function($) {
          $(document).ready(function(){
            var initMFAutocomplete = function() {
              //initalisiert Autocompleter für Magic Fields
              var lastXhr;
              var locURL = jQuery(location).attr('href').split('wp-admin')[0];
              $(".text_field_mf input").autocomplete({
                source: function( request, response ) {
                  var term = request.term;
                  //http://codex.wordpress.org/AJAX_in_Plugins
                  var data = {
                    action: 'jsonAutocomplete',
                    term: term,
                    field: $(this.element).attr("name").split('[')['1'].split(']')[0]
                 };
                 lastXhr = $.post(ajaxurl, data, function( anwser, status, xhr ) {
                 if ( xhr === lastXhr ) {
                   response(anwser);
                 }
                });
              }
            });
          };//Aufruf der Funktionen
          initMFAutocomplete();
         });
       })(jQuery);

5. In die adminCSS.css kommt das heruntergeladene jQueryUI CSS Framework. Bei mir “jquery-ui-1.8.18.custom.css”. Die Bilder benötigen wir nicht.
6. Nun wird es spannend. Die functions.php muss ergänzt werden. Als ersten benötigen wir die Scripts, als zweites muss die Ajax/JSON Antwort gebaut werden. Beginnen wir mit dem Einbinden der Scripts. Dafür verwenden wir folgenden Code:

   function load_custom_wp_admin_scripts(){
       wp_enqueue_style('admin_css', get_template_directory_uri() . '/adminCSS.css');
   	wp_enqueue_script('jquery-ui-core');
   	wp_register_script('admin_js', get_template_directory_uri() . '/adminJS.js', array('jquery'), '1.0' );
   	wp_enqueue_script('admin_js');
   }
   add_action('admin_enqueue_scripts', 'load_custom_wp_admin_scripts');

7. Danach folgt der Code für den Ajax Request. Damit das ganze auch sicher ist, setze ich auf die WordPress wp_ajax_… Funktion. Diese muss gleich heißen wie die action in unserem JavaScri, also “jsonAutocomplete”. Danach initalisieren wir eine Query auf die Posts, hier kann bei Bedarf auch ein Custo Post Type mitgegeben werden. Wir verarbeiten den Feldnamen des Custom Fields und holen dessen Werte aus der Datenbank.

   //ajax - falls user eingeloggt ist
   add_action( 'wp_ajax_jsonAutocomplete', 'jsonAutocomplete' );
   function jsonAutocomplete() {
      if(!isset($_POST['action']))
   		die();
   
   	$action = $_POST['action'];
           $term = $_POST['term'];
   	$field = esc_attr($_POST['field']);
   
   	if($action=="jsonAutocomplete"&&isset($field)){
   		$the_query = new WP_Query();
                   
                   $checkArray=array(); //zum prüfen auf duplicate
   
   		$out=array();
   		// The Loop
   		while ( $the_query->have_posts() ) : $the_query->the_post();//http://www.rarst.net/images/query_functions.png
                      $obj = get_post_meta(get_the_ID(), $field,1);
                      if($obj!=""&&in_array($obj, $checkArray)==false&&strstr($obj,$term)!=false){//ist nicht leer und kein duplikat und term kommt irgendwie in obj vor
                         array_push($checkArray,$obj);
                         array_push($out,array( 'id' => get_the_ID(),"label"=> $obj, "value"=> $obj));
                     }
                   endwhile;
   
   		// Reset Post Data
   		wp_reset_postdata();
   		//wp_reset_query();
   
   		if(!empty($out)){
   			// generate the response
   			$response = json_encode( $out );
   
   			// response output
   			header( "Content-Type: application/json" );
   			echo $response;
   		}
   	}
   
       // IMPORTANT: don't forget to "exit"
       exit;
   }

8. Fertig, sollte nun bei allen MagicField Textfeldern (inputs) funktionieren. Möchte man andere Felder hinzufügen, muss man gegebenenfalls den selector in der JS Datei anpassen:  $(“.text_field_mf input”).

Im Anhang die wichtigsten Code-Ausschnitte. Ich freu mcih über Kommentare.

Download the zip: MAGIC FIELDS AUTOCOMPLETER