Gradual mapping of loadable Ajax data?

Question

Laravel 5.3

Steam API

Ajax

When you type in input, there is an adjax request that uses the Steam API to select possible search options (live search).

However, too long. The user entered for example Half, and you have to wait 15-30 seconds until he collects all the results where there is a keyword and then only displays.

How to conclude immediately what ajax finds?

function getSteamGames(event) { $('.suggested').html(''); var token = $('input[name="_token"]').val(), gameName = $('#gameName').val(); if(gameName.length >= 4) { $.ajax({ url: '/getsteamgames', type: 'POST', dataType: 'json', data: { 'gameName': gameName, '_token': token, }, }) .done(function(data) { $.each(data, function(index, element) { var gameName = element.name, appID = element.appid; $('.suggested').prepend('<div class="suggestedGame label label-info" data-tag_id="'+appID+'">' + gameName + '</div>'); }); }) .fail(function() { console.log("ERROR"); }); } }

if you use pure jQuery, then done will wait for the request to complete and at the end you will receive all the data at once.
I get all the data by their API, from their servers, then I process it on my own, and I am already withdrawing it.
Then the call goes to them, then processing, and will return what is necessary, but the conclusion is long, I would like to show the user that everything is OK, that everything works, only loads for a long time, because they have a lot of data, and the Internet speed affects.
@MikhailVaysman yes, also an option, although there is less interactivity :(
@MikhailVaysman, is it possible to somehow display gradually the results that load, find 10 matches, display and search further?

Mikhail Vaysman Mikhail Vaysman 13.6k one 13 28 · Accepted Answer · 2017-01-03T00:26:46

As a spinner - the inscription

 function getSteamGames(event) { $('.suggested').html(''); var token = $('input[name="_token"]').val(), gameName = $('#gameName').val(); if(gameName.length >= 4) { // показали спиннер $('.suggested').html('Загрузка данных...'); $.ajax({ url: '/getsteamgames', type: 'POST', dataType: 'json', data: { 'gameName': gameName, '_token': token, }, }) .done(function(data) { $.each(data, function(index, element) { var gameName = element.name, appID = element.appid; // убрали спиннер $('.suggested').html(''); $('.suggested').prepend('<div class="suggestedGame label label-info" data-tag_id="'+appID+'">' + gameName + '</div>'); }); }) .fail(function() { // показали ошибку $('.suggested').html('Произошла ошибка при загрузки данных'); }); } }

although this is not what I wanted, I think this is suitable for a start.
After all, at least something is better :) Thank you, by the way, you talked about some libraries that allow you to do this, can you recommend what?

Gradual mapping of loadable Ajax data?

1 answer 1

More articles: