In this article I will explain how to display loading animated GIF Image (loading progress indicator icon) inside the jQuery Autocomplete TextBox when search is processed by jQuery Autocomplete plugin.
This article also explains how to hide or remove the loading animated GIF Image (loading progress indicator icon) once the search is completed.
Steps to display loading animated GIF Image (loading progress indicator)
1. Add Loading GIF image and CSS Class
You need to add a loading GIF animated image of your choice to the project. Then you need to place the following CSS on the page or in your external CSS Class file.
<style type="text/css">
.loader
{
background: url(loader.gif);
background-repeat: no-repeat;
background-position: right;
}
</style>
2. Apply the jQuery Autocomplete Plugin to the TextBox
Next thing you need to apply the jQuery autocomplete plugin to the TextBox.
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.0.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/themes/blitzer/jquery-ui.css"
rel="Stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("#txtSearch").autocomplete({
source: function (request, response) {
$.ajax({
url: 'Default.aspx/GetFruits',
data: "{ 'prefix': '" + request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data.d, function (item) {
return {
label: item.split('-')[0],
val: item.split('-')[1]
}
}))
}
});
}
});
});
</script>
Enter search term:
<input type="text" id="txtSearch" />
3. Displaying Animated Loading GIF Image (Loading Progress Indicator)
In order to display the animated loading GIF Image (loading progress indicator) when search is in process, I have used search event handler of jQuery Autocomplete plugin.
Within this event handler I have added the loader CSS class to the jQuery Autocomplete TextBox, doing this displays the animated loading GIF Image (loading progress indicator) within the TextBox.
search: function (e, u) {
$(this).addClass('loader');
}
4. Hiding Animated Loading GIF Image (Loading Progress Indicator)
In order to hide the animated loading GIF Image (loading progress indicator) when search is completed, I have used response event handler of jQuery Autocomplete plugin.
Within this event handler I have removed the loader CSS class applied to the jQuery Autocomplete TextBox, doing this hides the animated loading GIF Image (loading progress indicator) displayed within the TextBox.
response: function (e, u) {
$(this).removeClass('loader');
}
Complete jQuery Autocomplete Client Side Implementation
Below is the complete jQuery autocomplete implementation.
<style type="text/css">
.loader
{
background: url(loader.gif);
background-repeat: no-repeat;
background-position: right;
}
</style>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.0.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/themes/blitzer/jquery-ui.css"
rel="Stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("#txtSearch").autocomplete({
source: function (request, response) {
$.ajax({
url: 'Default.aspx/GetFruits',
data: "{ 'prefix': '" + request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data.d, function (item) {
return {
label: item.split('-')[0],
val: item.split('-')[1]
}
}))
}
});
},
search: function (e, u) {
$(this).addClass('loader');
},
response: function (e, u) {
$(this).removeClass('loader');
}
});
});
</script>
Enter search term:
<input type="text" id="txtSearch" />
ASP.Net Server Side WebMethod DataSource
I have made use of ASP.Net WebMethod for this example, which acts as a source of data.
[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod()]
public static string[] GetFruits(string prefix)
{
System.Threading.Thread.Sleep(2000); //Delay of 2 seconds
List<string> fruits = new List<string>();
fruits.Add("Mango");
fruits.Add("Apple");
fruits.Add("Banana");
fruits.Add("Orange");
fruits.Add("Pineapple");
fruits.Add("Guava");
fruits.Add("Grapes");
fruits.Add("Papaya");
return fruits.Where(f => f.ToLower().IndexOf(prefix.ToLower()) != -1).ToArray();
}
![Display Loading Animated GIF Image (Progress Indicator) in jQuery AutoComplete Textbox]()
Demo
Downloads
