Load search form results inline with jQuery, instead of on a new page

Question

I'm trying to build a custom search form for an e-commerce setup built on Magento.

This search form consists of several (dropdown) select boxes. The form is functioning properly, but after you choose your search values and submit the form, you're taken to a new page with the results.

Search page URL: http://exampleshop.com/catalogsearch/advanced
Results page URL: http://exampleshop.com/catalogsearch/advanced/result/?color=red&size=large

What I would like to do is instead load the search results in a div below the form with some jQuery.

I've searched and have found several examples of this, but I can't seem to get anywhere. I've also come across a few similar threads here on Stack Overflow, but nothing here has worked for me as of yet.

Thank you for any help or guidance on this.

Answer 1

.load is the easiest way. It basically calls a program and when it finishes, the results are loaded into wherever you want. In its most complete form it'd be like :

$("#results").load("/search.php?keyword=" + $("#searchinput").val() + " #phpresult", showResults)

Would call search.php with a parameter keyword with the 'searchinput' field's value (You'd need to encode or whatever). When the search.php page finishes searching, it could leave the results in a container with id 'phpresult', and this would replace the contents of the calling program's 'results' container. When the load completes, the function 'showResults' is called to do whatever you want to do.
In its simplest form it'd be like

$("#results").load("/search.php?keyword=" + $("#searchinput").val())

which just calls the program and the whole body of the result would go into #results.

Answer 2

http://api.jquery.com/load

$('div').load(someUrl, opts);