GIF загрузки загрузки с автозаполнением JQuery-UI - PullRequest
Новая
       10

GIF загрузки загрузки с автозаполнением JQuery-UI

0 голосов
/ 18 сентября 2018

Я использую 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');
                }
            });
        }
    });

Вот мой код для автозаполнения.И я использую datatables версии 1.10.16 для отображения данных.Я хочу показывать изображение загрузчика до тех пор, пока не отобразятся данные поиска.

1 Ответ

0 голосов
/ 19 сентября 2018

JQuery autocomplete добавляет класс ui-autocomplete-loading во время загрузки содержимого.

Добавьте следующую строку в 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 выше.См. Демо 

setTimeout(function(){
    //logic of fetching data.
}, 1500);

Надеюсь, это может помочь вам решить вашу проблему.

...