Tell me more ×
WordPress Answers is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I've used JQuery UI autocomplete in the past, with a remote php source, but now I'm trying to do the same in WordPress and have come unstuck!

UPDATE

I'm really close to getting this working, albeit with static values for now, but need a little help with the JS side of things.

Using the following as a reference: Ajax and autocomplete

I have everything in functions.php in place:

function myautocomplete() {
   wp_enqueue_script('jquery-ui-autocomplete');
   wp_enqueue_script( 'myajax_jsfile_handle', JSPATH ."myautocomplete.js", array( 'jquery' ), 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'
       )
   );
}
add_action('wp_print_scripts','myautocomplete');


// 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;  

   $staticvalues = array(
      array('label' => 'Superman', 'value' => 123),
      array('label' => 'Predator', 'value' => 456),
      array('label' => 'Blade', 'value' => 789)
   );

   echo json_encode($staticvalues);
   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' );

In myautocomplete.js

(function($) {
   $( "#tags" ).autocomplete({
      source: function(request, response) {
         $.getJSON(MyAjax_object.ajaxurl + "?callback=?&action=myajax-submit", request, function(data, status, xhr ) {
            alert('hello');
         });
      },
   });
})( jQuery ); 

I can see that MyAjax_object.ajaxurl + "?callback=?&action=myajax-submit is correctly pulling back the json:

[{"label":"Superman","value":123},{"label":"Predator","value":456},{"label":"Blade","value":789}]

At this stage all I want it to get an alert('hello'); to test that the callback is working. In FireBug XHR I can see that it is firing on each keypress:

http://www.mywordpress.com/wp-admin/admin-ajax.php?callback=jQuery18304256707753006962_1363116323403&action=myajax-submit&term=s&_=1363116328736

So why isn't the autocomplete js firing the alert, or doing anything at all?

share|improve this question
Figured out the JS problem. I wasn't wrapping the JSON in the callback function. Once I'm a bit further on, I'll update with more code. – Chris Mar 12 at 20:40

Know someone who can answer? Share a link to this question via email, Google+, Twitter, or Facebook.

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.