Использование Ajax Loading с полем Smart Search

Question

Представьте себе панель поиска Google.Когда вы что-то печатаете, это Smart Searchable, где он дает вам возможные результаты при наборе текста.Моя панель поиска делает это.Но затем значок поиска справа в Google при вводе и после нажатия клавиши ввода для параметра я хотел бы, чтобы значок поиска изменился на загружаемый Gif во время его обработки?

Может кто-нибудь поделиться направлением на то, что яя не могу получить GIF-файл загрузки Ajax, который будет виден во время ожидания параметров, а затем один раз выбрать отображение GIF-файла загрузки во время ожидания показа вашего результата?

Использование ASP и jQuery

Вот чтоЯ так далеко:

Это то, что должно быть, прежде чем что-либо набрать в окне поиска, увеличительное стекло:

`
<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..." />
`

Затем он остановится и вернется к увеличительному стеклу, а затем, когда вы нажмете Enter или выберите опцию и нажмете Enter илиможет быть, даже просто введите результат поиска и нажмите Enter, значок загрузки будет вращаться снова, указывая на то, что вы должны подождать, пока результат генерируется.

Так что в настоящее время на странице HTML / ASP у меня есть это:

`
<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..." />
`

Затем у меня есть страница JS, на которой есть:

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

Я хочу скрыть первое изображение и показать второе изображение, и после завершения загрузки вернуться к первому изображению.

Спасибо всем за ясность Приветствия !!

Вот где я сейчас с этим.Изображения все еще видны рядом:

Мой 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>
`

Мой 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

В моем проекте мне это нравится, надеюсь, это полезно для вашей проблемы

<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>