Question

想象一下Google搜索栏。当您输入内容时，它是Smart Searchable，它可以在键入时为您提供可能的结果。我的搜索栏就是这么做的。但是在输入时输入选项后点击谷歌右侧的搜索图标，我希望搜索图标在处理时更改为加载GIF？

有人可以分享我在缺少Ajax时的方向，在等待选项时可以看到加载的gif，然后在等待显示结果时选择显示加载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或选择一个选项并单击输入或甚至只需键入搜索结果并单击输入加载图标然后再次旋转指示您等待结果是产生。

所以目前在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>

使用Ajax加载智能搜索字段

1 个答案: