Filter search results without reloading page

JavaScript
1

I’m wondering how to do the following, here is a simplified example:

Let’s say I have a database of pictures of animals. A search for “pets” is performed and it loads a page of thumbnail images. Somewhere on the page is a list of other search criteria (text link or checkbox) that would narrow the initial returned results. An example would be “cats”, “dogs”, “hamster”, etc.

Is there a way after the initial search is performed that the results could be further filtered without having to hit a submit button and reload the page?

2

Yes, this can be achieved through javascript only or ajax, depending on the specifics.
If you simply want to filter the results that are already on screen, you could use javascript to show or hide certain elements based on their attributes.

If you want to do a new query to the database, you need ajax. With ajax you can essentially “refresh” a piece of PHP code, sending new parameters to the same script.

3

Thanks for the reply.

To do there ajax version described (new query to database), is there a term that would describe this functionality? I tried to Google for more info, but I’m not sure what I should be searching for.

4

I would first of all recommend using jQuery (if you aren’t already), this makes the use of ajax a lot easier.

You would be using the $.post function. It works basically like this:

$.post('url to request',{parameter: value, parameter: value},function(data){

    /* handle 'data' */

});

The url to request here would be the script that does the database query and returns the results, the parameters here could be the new sorting method (these parameters are directly passed to $_POST).
Within the $.post function you need a bit of jQuery to process the data variable that is given back and contains the output of the file that you requested.
If you simply have the script that is requested through ajax output the new items, this output will be in the data variable and all you have to do is put it into a div like so:

$(‘Content’).html(data);

So your final ajax script could look like this:

$.post('results.php',{sort_method: 'az'},function(data){

    $('#content').html(data);

});

If you want more information, just google for ajax, jquery and php.