Creating an AJAX Filter using Solspace Super Search
View original article of this tutorial »
The boring, yet needed, introduction
We recently launched a site that utilizes Solspace Super Search and Malsup’s jQuery Form plugin for a handy AJAX filter. The filter simply gathers homes that fit certain parameters such as “number of bedrooms”, “number of bathrooms”, “square footage”, etc.
Luckily, Super Search and Malsup’s Form Plugin takes 99% of the work out of all this and you get to look like you know what you’re doing.
For this tutorial, I’m going to assume a few things:
- You know your way around ExpressionEngine
- You have a “Homes” channel setup and some entries with custom fields like “Bedrooms (select dropdown)”, “Bathrooms (select dropdown)”, and “Square Footage (text input)”
- You know how to setup jQuery plugins on your site
- You have no clue how to setup AJAX anything (I didn’t when we set this up)
A note: Within Super Search, you need to change your “Square Footage” field to an integer. This will allow you to search the value numerically rather than textually.
So, let’s get started.
The business
Demo: A (more developed) example of the final product.
Your basic template with filter (search/index):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Search for a Home</title>
<meta charset="utf-8">
{!-- jQuery, Malsup's Form Plugin, script for the Form Plugin --}
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script src="http://jquery.malsup.com/form/jquery.form.js"></script>
<script>
$(document).ready(function() {
var options = {
target: '#results',
beforeSubmit: showRequest
};
$('#filter').ajaxForm(options);
});
// Show loading message and submit form
function showRequest(formData, jqForm, options) {
$('#results').prepend('<span>Searching</span>');
return true;
}
</script>
</head>
<body>
<h1>Search for a Home</h1>
{!-- This is where the results of the filter will be placed into. You can insert stuff in here initially, but it will be replaced by results when the form is used. --}
<div id="results">
<p>I will be replaced when you search. Sad day.</p>
</div>
{!-- The form to filter your results. Note the template I am using in the action parameter in the form tag --}
<form id="filter" method="post" action="{path='search/results'}">
{exp:super_search:search}
<label>
Bedrooms
<select name="bedrooms-from">
<option value="1">1+</option>
<option value="2">2+</option>
<option value="3">3+</option>
<option value="4">4+</option>
<option value="5">5+</option>
<option value="6">6+</option>
<option value="7">7+</option>
<option value="8">8+</option>
<option value="9">9+</option>
<option value="10">10+</option>
</select>
</label>
<label>
Bathrooms
<select name="bathrooms-from">
<option value="1">1+</option>
<option value="2">2+</option>
<option value="3">3+</option>
<option value="4">4+</option>
<option value="5">5+</option>
<option value="6">6+</option>
<option value="7">7+</option>
<option value="8">8+</option>
<option value="9">9+</option>
<option value="10">10+</option>
</select>
</label>
<label>
Square Footage (Min)
<select name="square_feet-from">
<option value="">All</option>
<option value="200">200</option>
<option value="400">400</option>
<option value="600">600</option>
<option value="800">800</option>
<option value="1000">1,000</option>
<option value="1200">1,200</option>
<option value="1400">1,400</option>
<option value="1600">1,600</option>
<option value="1800">1,800</option>
<option value="2000">2,000</option>
<option value="2200">2,200</option>
<option value="2400">2,400</option>
<option value="2600">2,600</option>
<option value="2800">2,800</option>
<option value="3000">3,000</option>
</select>
</label>
<label>
Square Footage (Max)
<select name="square_feet-to">
<option value="">All</option>
<option value="200">200</option>
<option value="400">400</option>
<option value="600">600</option>
<option value="800">800</option>
<option value="1000">1,000</option>
<option value="1200">1,200</option>
<option value="1400">1,400</option>
<option value="1600">1,600</option>
<option value="1800">1,800</option>
<option value="2000">2,000</option>
<option value="2200">2,200</option>
<option value="2400">2,400</option>
<option value="2600">2,600</option>
<option value="2800">2,800</option>
<option value="3000">3,000</option>
</select>
</label>
<input type="submit" name="submit" value="Search" />
{/exp:super_search:search}
</form>
</body>
</html>
Your results template (search/results):
{exp:super_search:results channel="home"}
{if super_search_no_results}
<p>No homes were found for your search. Try being less specific with your filter.</p>
{/if}
<div class="result">
<h3>{title}</h3>
<p>This home has {bedrooms} bedrooms, {bathrooms} bathrooms, and is {square_feet} square feet.</p>
</div>
{/exp:super_search:results}
The End
So, that’s it. Again, it’s the wonderful developers who make complicated things really easy. Massive props to Solspace and Malsup.
Posted November 11, 2011 at 2:11 pm by Aaron Bushnell