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

Tagged with: , , , ,
Posted in wordpress
4 Comments » for Wir bauen einen Autocompleter für WordPress Magic Fields
  1. andrew says:

    Sorry, can you give me some advice?
    first of all: the Theme you refer to is the admin theme isn’t it?..so the inclusion path are referred to the wp-admin folder and the files:”adminJS.js” and “adminCSS.css” are placed in the wp-admin folder; the ui-autocmplete anywhere with paths referred to it I guess.
    Functions.php is the functions file in the wp-includes folder right?..
    what about the data source? cannot understand where it is..sorry but I’m not very expert with coding..thanks for help

    • BMo says:

      Hi,
      no. I recommend to put all this files in your wp-content… theme folder and functions.php is the functions.php in your theme folder. Otherwise a wordpress update will overwrite your scripts.

  2. Indrek says:

    Hi. This is really a good solution. But I have a question.
    How could only unique values be selected?
    I have a custom post type and it’s posts have key-value sets (product:value1, product:value2). So calling every value puts out many duplicates. How could array_unique be used here?
    Thanks anyway :)

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

More aboute me
Give me a +


donate my work ♥ → paypal