Question

Imagine the Google search bar. When you type something it is Smart Searchable where it gives you possible results while typing. My search bar does that. But then the Search Icon to the right in Google while typing and after hitting enter on an option, I would like the Search Icon to change out to a Loading Gif while it processes?

Can someone share direction on what I’m missing in getting an Ajax Loading gif to be visible while waiting for options and then once chosen showing the Loading gif while waiting to show your result?

Using ASP and jQuery

Here is what I got so far:

This is what it should be before anything is typed in the search box, a magnifying glass:

`
<img style="background:url(/images/image_giblets_20x.png) no-repeat scroll right -414px transparent" src="images/transparent_100x100.png" width="23px" height="23px" />
`

Then while typing it is set up to show results of what you might be looking for. And while those results are loading I would like to have a loading icon spin.

`
<img id="loading_image" src="/images/ajax-loader.gif" alt="Loading..." />
`

It would then stop and go back to the Magnifying glass and then once you click Enter or select an option and click enter or maybe even just type a search result and click Enter the loading icon would then spin again indicating you to wait while the result is generating.

So currently in HTML/ASP page I have this:

`
<img style="background:url(/images/image_giblets_20x.png) no-repeat scroll right -414px transparent" src="images/transparent_100x100.png" width="23px" height="23px" />
`

`
<img id="loading_image" src="/images/ajax-loader.gif" alt="Loading..." />
`

Then I have a JS page that has this:

`
// Smart Search ajax loader
$(window).load(function() {
        $('#loading_image').hide();
    });
`

I want to hide the first image and show the second image and once the loading is done to go back to the first image.

Thanks All for the clarity Cheers!!

Here’s where I’m at now with it. The images are both still visible side by side:

My ASP:

`
      <div id="smart_search">

        <asp:TextBox ID="searchfield" runat="server" />

        <asp:TextBoxWatermarkExtender ID="TBWE2" runat="server" TargetControlID="searchfield" WatermarkText="Search alpaca, farm and owner names here!" WatermarkCssClass=""/>
        <asp:HiddenField ID="HiddenField1" runat="server"  />
        <img id="magnifying_glass" style="background:url(/images/image_giblets_20x.png) no-repeat scroll right -414px transparent" src="images/transparent_100x100.png" width="23px" height="23px" />
                <img id="loading_image" src="/images/ajax-loader.gif" alt="Loading..." />

      </div>
`

My JS:

`
// Smart Search ajax loader
 $("#searchfield").bind("keyup", function(args){
     //check key value 
     $('#magnifying_glass').hide();
     $('#loading_image').show();
     var searchvalue = $("#searchfield").val();
     $.ajax({
         data: "searchvalue=" + searchvalue,
         url: "/getsearchvalue",
         success: function(result){
             $('#loading_image').hide();
             $('#magnifying_glass').show();
             //handle result
         }
            });
});
`

Answer 1

In my project I do like this, hope it’s useful for your problem

<input id="searchbox" type="textbox">
<script type="text/javascript">
$(document).ready(function(){
    $("#searchbox").bind("keyup", function(args){
        //check key value 
        $('#first_image').hide();
        $('#loading_image').show();
        var searchvalue = $("#searchbox").val();
        $.ajax({
            data: "searchvalue=" + searchvalue,
            url: "/getsearchvalue",
            success: function(result){
                $('#loading_image').hide();
                $('first_image').show();
                //handle result
            })
    });
});
</script>