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?