I've implemented the jQuery code below for an autocomplete input field, but I'd like to have a spinner display while waiting for the response from the server.
In my code, I'm using search: to show the loading div and open: to hide it. The success function is then used to display the result.
$(document).ready(function(){
$('#search_field').keyup(function(){
var search = $(this).val();
if(search != '')
{
$.ajax({
url: 'search.php',
method: 'POST',
data: {search:search},
search: function()
{
$('#search_loader').fadeIn('fast', 'swing');
},
open: function()
{
$('#search_loader').fadeOut('fast', 'swing');
},
success: function(data)
{
if(data == '') {
$('#autocomplete_result').fadeOut('fast', 'swing');
} else {
$('#autocomplete_result').fadeIn('fast', 'swing');
$('#autocomplete_result').html(data);
}
}
});
}
});
});
Unfortunately, neither search: nor open: seem to be working as expected. As someone new to JS, can anyone provide some guidance on what might be incorrect in my implementation?