无法确定何时隐藏和显示使用 JQuery 的加载动画

Question

我有一个加载动画，最初隐藏在我的 application.js 文件中：

$('#loading_field').hide();

我有一个自动完成字段，我希望动画在用户开始输入时出现，并在自动完成建议结果出现时消失。下面是我的 jquery ui 自动完成插件的 jquery 代码：

$(".showable_field").autocomplete({
    minLength: 1,
    source: '/followers.json',
    focus: function(event, ui) {
       $('.showable_field').val(ui.item.user.name);
       return false;
    },
    select: function(event, ui) {
        var video_id = $('#video_id_field').val();
        var user_id = ui.item.user.id;
        $.post("/showable_videos.js", {video: video_id, user: user_id});
        $(':input','#new_showable_video').not(':button, :submit, :reset, :hidden').val('');
        return false;
    }
});
var obj = $(".showable_field").data('autocomplete');
obj && (obj._renderItem = function( ul, item ) {
    return $( "<li></li>" )
       .data( "item.autocomplete", item )
       .append( "<a>" + item.user.name + "</a>" )
       .appendTo( ul );
});

我应该在哪里显示和隐藏动画？

Answer 1

好吧，jQuery UI 在加载远程数据时会自动将“ui-autocomplete-loading”类添加到您的输入中，因此最简单的方法就是简单地将动画 GIF 作为输入中的背景图像类存在。

这就是他们在 jQueryUI.com 上的 远程加载示例 中所做的事情（请注意，您必须在本例中，再输入两个字符来启动 ajax 调用）。

<style>
  .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
</style>

Answer 2

因为您使用 AJAX 来加载建议，所以我认为这应该适合您：

$('#loading_field').ajaxStart(function () {
  $(this).show();
}).ajaxStop(function () {
  $(this).hide();
});