Jquery UI animation of loading

Question

I need to do an animation of loading directly in the list of items, like this:SnapShot

I used jQuery UI, here the code:

   $(document).ready(function() {
     $("#cities").autocomplete({
        source: function(request, response) {
             var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
            $.ajax({
                url: "file.json",
                dataType: 'json'
            }).done(function(data){
           response($.map(data, function(v,i){
                var text = v.City;
                if(text && ( !request.term || matcher.test(text))){
                    return {
                        label: v.City,
                        value: v.City
                    };
                }
            }));
          });
        },


        search: function(event, ui){
            //$('#ui-id-1').addClass('ui-menu ui-widget ui-widget-content ui-autocomplete ui-front').show();            
        },
        open: function(event, ui) { 
          //  $('#ui-id-1').removeClass('ui-menu ui-widget ui-widget-content ui-autocomplete ui-front').hide();
        },


        close: function(event, ui) { 
           /*.......*/
        },
        minLength: 1,
        autoFocus: true,
        crossDomain: true,
        response: function(event, ui) {
            if (!ui.content.length) {   
                ui.content.push({label:"Not found"});
            } 
        }
    });
});

Html:

    <div class="wrap">

    <label for="cities">Cities: </label>
    <input id="cities">
    <ul  tabindex="0" id="ui-id-1" style="display: none;" ><li class="ui-menu-item "><div tabindex="-1" id='ui-id-3' class="ui-menu-item-wrapper">Seeking</div></li></ul>

</div>

I've read that I can use search and open to manipulate with elements during loading of the source, but there is a problem:

I tried to use .addClass and .show() methods to display the list. It worked, but the element had the wrong position: It was on the top of page - styles for it didn't calculate at all.

How can it be fixed or are there any other ways?

Welcome to Stack Overflow. Do you want this loading gif to appear as a list item upfront? How long do you normally anticipate a search taking to get results? This is why `minLenght` is an option. To help reduce the number of results by sending a larger term. Instead of "p" resulting in 1600 results, we send "pop", resulting in 24 results. — Twisty, Mar 14 '17 at 18:51
Possible duplicate of http://stackoverflow.com/questions/4489607/jquery-autocomplete-how-to-show-an-animated-gif-loading-image *autocomplete already adds the ui-autocomplete-loading class (for the duration of the loading) that can be used for this... `.ui-autocomplete-loading { background:url('img/indicator.gif') no-repeat right center }`* — Twisty, Mar 14 '17 at 18:52
I want to display the animation during the loading of list, when search process is going, I just don't know how to place the animation into list — IvanNik, Mar 14 '17 at 19:10
Here is a basic example: https://jsfiddle.net/Twisty/2xj18jk9/ I will see if I can make it do more like what you;re suggesting in your image. Again, how much time do you anticipate the loading image to be displayed? — Twisty, Mar 15 '17 at 15:00

score 0 · Answer 1 · answered Mar 15 '17 at 15:34

Here is a solution that is a bit closer to what you showed in the image.

Working example: https://jsfiddle.net/Twisty/2xj18jk9/2/

CSS

.my-autocomplete-loading {
  width: 175px;
  background: white url('https://dmg98m9mr6pi1.cloudfront.net/RoR/images/wait_arrows.gif') no-repeat left center;
  padding-left: 25px;
}

JavaScript

$(document).ready(function() {
  $("#cities").autocomplete({
    source: function(request, response) {
      // Your Source Code
    },
    search: function(e, ui) {
      $("<span>", {
          class: "my-autocomplete-loading"
        })
        .html("Loading...")
        .insertAfter("#cities")
        .position({
          my: "left top",
          at: "left bottom",
          of: "#cities"
        });
    },
    open: function(e, ui) {
      $(".my-autocomplete-loading").remove();
    },
    minLength: 1,
    autoFocus: true,
    crossDomain: true
  });
});

So this makes use of search and open. See more:

Hope this helps.

score 0 · Answer 2 · answered Mar 15 '17 at 16:24

Thanks, i found the 'dumb' way, but it works well, I just added a wrapper: $(document).ready(function() {

    $("#cities").autocomplete({
        source: function(request, response) {
             var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );

            $.ajax({
                url: "file.json",
                dataType: 'json'
            }).done(function(data){
           response($.map(data, function(v,i){
                var text = v.City;
                if(text && ( !request.term || matcher.test(text))){
                    return {
                        label: v.City,
                        value: v.City
                    };
                }
            }));
          });
        },
        search: function(event, ui){
            $('#ui-id-1').hide();
            $('#load').addClass('ui-menu ui-widget ui-widget-content ui-autocomplete ui-front');
            $('#load').css({
                position: "relative", 
                display:" block"}); 
        },
        open: function(event, ui) { 
            $('#load').removeClass('ui-menu ui-widget ui-widget-content ui-autocomplete ui-front').hide();
        },
        close: function(event, ui) { 

        },
        minLength: 1,
        autoFocus: true,
        crossDomain: true,
        response: function(event, ui) {
            if (!ui.content.length) {   
                ui.content.push({label:"Not found"});
            } 
        }
    });

html:

<span for="cities">Cities: </span>
<div class="wraper">
    <input id="cities">
    <ul  tabindex="0" id="load" style="display: none;" ><li class="ui-menu-item "><div tabindex="-1" id='ui-id-3' class="ui-menu-item-wrapper"><span class="preloader"></span>Loading</div></li></ul>
</div>

Jquery UI animation of loading

2 Answers2