Ajax and autocomplete

Use jQuerys getJSON in the autocompletes source method and use WordPress’ admin-ajax.php to handle the request, to avoid having to find wp-load.php (which may have been moved) and would load WordPress on every request.

First of all: get the ajax url of your WordPress blog:

This is simple:

admin_url( 'admin-ajax.php' )

But, we want this accessible in your javascript file, so use wp_localize_script

wp_enqueue_script( 'myajax_jsfile_handle', get_stylesheet_directory."/rest/of/path/to/file.js", array( 'jquery', 'jquery-form', 'json2' ), false, true ); );
wp_localize_script( 
    'myajax_jsfile_handle', 
    'MyAjax_object', 
    array( 
        'ajaxurl' => admin_url( 'admin-ajax.php' ),
        'myajax_nonce' => wp_create_nonce( 'myajax_nonce_val' ),
        'action' => 'myajax-submit'
    )
);

Where myajax_jsfile_handle is the handle of your registered javascript file. Call the above when you queue your javascript file.

The autocomplete source method

For your source in the JQuery UI autocomplete option…

source: function( request, response ) {  
    jQuery.getJSON( MyAjax_object.ajaxurl + "?callback=?&action=myajax-submit", request, function( data ) {  
        response( jQuery.map( data, function( item ) {
            jQuery.each( item, function( i, val ) {
                val.label = val.whatever; // build result for autocomplete from suggestion array data
            } );
            return item;
        } ) );
  } );  
},

• request is whatever is typed.
• The action is what WordPress interprets (see below).
  These are added the url that autcomplete uses to return the suggestions.

What the above does is takes each item (the returned JSONrd rows) and gives them a label, which the autocomplete uses to display the suggestions. (In the example above the label is the content of the column ‘column’)

Tell WordPress how to do deal with the request

So the above sends to WordPress an ajax request with action ‘myajax-submit’.

When WordPress recieves this it triggers the actions wp_ajax_myajax-submit (if the user is logged in) or wp_ajax_nopriv_myajax-submit if they are not. You can hook your function onto one or both of these hooks, depending on whom you intend to allow this AJAX request for. Our function will perform any necessary querys and JSON the result (the suggestions) and echo them.
       

        // Callback
        function get_my_suggestions() {
            // This function should query the database and get results as an array of rows:
            // GET the recieved data: 'term' (what has been typed by the user)
            $term = $_GET['term']
            $suggestions_array = array();

            // echo JSON to page  and exit.
            $response = $_GET["callback"]."(". json_encode($suggestions_array) .")";  
            echo $response;  
            exit;
        }
    add_action( 'wp_ajax_myajax-submit', 'get_my_suggestions' );
//For non-logged in users add_action( 'wp_ajax_nopriv_myajax-submit', 'get_my_suggestions' );

Disclaimer: The example returns an empty array in any case.