/    Sign up×
Community /Pin to ProfileBookmark

How do they do that??

I’ve noticed that several sites like kayak.com and soonth.com use sliders to allow users to filter search results. For example, if a kayak user wants to only include flights that take off in the morning, they can move the slider for takeoff time so that it only includes morning times. As soon as the user let’s go of the slider the results update immediately.

What I’m amazed by is that these filters update the results without sending a request to the server. So the site must be receiving all possible results when the page first loads. The site only displays the first 10 results at first, but if the user changes one of the filters it is able to display results not included in the initial 10 without making a server request.

How is this possible? How can all results be downloaded when the page is first loaded without displaying them all? Could anyone direct me to a place where I can learn how to implement this on my own site?

Thanks very much.

to post a comment
JavaScript

1 Comments(s)

Copy linkTweet thisAlerts:
@MrNobodyNov 19.2008 — How do you know it is not making a request to the server? JavaScript is able to use AJAX to make a request to the server behind the scenes and without refreshing the entire page in the process. On the flip side, server-side code could certainly build a JavaScript array to pass results which are not immediately displayed to the end-user. Such array values can be filtered and re-displayed any number of ways without necessarily requiring another trip to the server.
×

Success!

Help @jack7890 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.25,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...