Jquery ui 使用jQuery ui自动完成显示加载gif

我使用的是jQuery ui自动完成版本v1.12.1。如何添加加载GIF？我正在尝试仅使用jQuery检索数据。。。没有AJAX调用

    jQuery(document).ready(function(){
    var product_data = <?php echo $product_implode; ?>;
        if(product_data != ''){
            jQuery( "#search_box" ).autocomplete({
                appendTo: "#project-description",
                minLength: 1,
                source: product_data,
                open: function(e, ui) {
                    jQuery('#project-description').addClass('autocomplete-content');
                },
                close: function(e, ui){
                    jQuery('#project-description').removeClass('autocomplete-content');
                }
            });
        }
    });

jQuery（文档）.ready（函数（）{
var乘积_数据=；
if（产品_数据！=''）{
jQuery（“搜索框”）.autocomplete({
附件：“#项目说明”，
最小长度：1，
资料来源：产品数据，
打开：功能（e、ui）{
jQuery（“#项目描述”）.addClass（'autocomplete-content'）；
},
关闭：功能（e、ui）{
jQuery（“#项目描述”）.removeClass（'autocomplete-content'）；
}
});
}
});

---

这是我的自动完成代码。我正在使用datatables 1.10.16版来显示数据。我想显示加载程序图像，直到不显示搜索数据。

JQuery autocomplete在加载内容时添加

ui autocomplete加载类

在css中添加以下行：

.ui-autocomplete-loading { background:url(http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/images/ui-anim_basic_16x16.gif) no-repeat right center }

编辑：

正如@Twisty所说，如果您的所有数据都在客户端，那么在显示自动完成时，它将没有足够的时间显示加载的gif

因此，您可以使用上面提到的css添加以下脚本。看

希望，这可能会帮助您解决问题。
您的请求不清楚。您希望显示什么GIF？哪里如果没有AJAX调用，那么数据将立即显示。是否要添加延迟并在此时显示加载gif？
setTimeout(function(){
    //logic of fetching data.
}, 1500);