How to implement jquery autocompleter in wordpress - php

Question

I am trying to make auto complater working in wordpress.
Here is my php code
function autocompleteCallback() {
global $wpdb; // this is how you get access to the database
//$whatever = $_POST['search_string'];
$name=$_POST['search_string'];
// echo'hiii'. $name='a';
$employee=$wpdb->get_results("SELECT `user_login` FROM wp_users WHERE user_login LIKE '$name%' ");
foreach($employee as $key=> $value){
$myarr[]=array('val' => $value->user_login);
}
//wp_reset_query();
echo json_encode($myarr);
die(); // this is required to return a proper result
}
add_action('wp_ajax_autocompleteCallback', 'autocompleteCallback');
add_action('wp_ajax_nopriv_autocompleteCallback', 'autocompleteCallback');
Here is my jquery
$(function() {
//function log( message ) {
// $( "<div>" ).text( message ).prependTo( "#log" );
// $( "#log" ).scrollTop( 0 );
// }
//alert('huii');
$("#se").autocomplete({
//dataType: "json",
source: function( request, response ) {
$.ajax({
url: './wp-admin/admin-ajax.php',
dataType: "json",
data: {
action: 'autocompleteCallback',
search_string:'a',
// term: $(options.fieldName).val()
},
success: function( data ) {
//alert(data);
alert('huii');
response( $.map( data.results, function( item ) {
return {
alert('hi');
label: item.val,
///value: item.title,
//url: item.url
}
}));
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(jqXHR, textStatus, errorThrown);
}
});
},
minLength: 1,
//select: function( event, ui ) {
// log( ui.item ?
// "Selected: " + ui.item.value + " aka " + ui.item.id :
// "Nothing selected, input was " + this.value );
// }
// select: function( event, ui ) {
// log( ui.item ?
// "Selected: " + ui.item.value + " aka " + ui.item.id :
// "Nothing selected, input was " + this.value );
// }
});
});
However, I could make this work in normal html, php web site where I passe source as a string. I can't figure where I have done mistake when I use function for source tag.
html code
<input id ="se" type="text" name="test" width="20" />

Answer 1

Why you dont just use this awesome plugin: SearchAutocomplete