How to add such loading effect to my code?-CodePudding

I need to add the effect of loading the results of the search, which can look like this:

To my jQuery code:

$('#popup-search-input').on('keypress', function (e) {
        if (e.which === 13) {
          $('.search-results').html('searching');
          $.get('/api/entity-product-search/'   $(this).val(), function (data) {
            $('.search-results').html(data);
          });
        }
      });

I'm not using ajax here because it does Drupal behaviors.

CodePudding user response：

If you want to add it to the search input itself you can use an image or icon and position it over the input.

.search {
  position: relative;
  width: 200px;
}

.search input {
  width: 100%;
  padding: 10px;
}

.search .fa {
  position: absolute;
  right: -12px;
  top: 10px;
  z-index: 1;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">


<div >
  <input type="text" placeholder="Searching...">
  <!-- using Font Awesome library for icon -->
  <i ></i>
</div>

CodePudding user response：

This is what you looking for, when you get success from $.get preloader will be hide again

$('#popup-search-input').on('keypress', function (e) {
  
        if (e.which === 13) {
        $("#preloader").show();
          $('.search-results').html('searching');
          $.get('/api/entity-product-search/'   $(this).val(), function (data) {
          $("#preloader").hide();
            $('.search-results').html(data);
          });
        }
      });

#preloader{
display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="popup-search-input" type="text"/>
<img id="preloader" src="https://i.gifer.com/origin/c0/c0bf6e330c9d364e65b6549271806932_w200.gif">