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

I have a loading animation which I initially hide in my application.js file:

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

我有一个自动完成场，我想，当用户开始输入的动画出现，并在自动完成建议，结果显示它消失。下面是我的jQuery code的jQuery用户界面自动完成插件：

I have an autocomplete field, and I want the animation to appear when the user starts typing, and for it to disappear when the autocomplete suggestion results appear. Below is my jquery code for the jquery ui autocomplete plugin:

$(".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 );
});

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

Where should I show and hide the animation?

推荐答案

由于您使用AJAX来加载，我认为这应该为你工作的建议：

Because you're using AJAX to load the suggestions I think this should work for you:

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