The Return of MODx ajaxSearch with Simple Search in Revolution?

You may remember the ajaxSearch snippet from MODx Evolution that allowed a user to search without leaving the page (or regularly if the webmaster preferred). It was a useful search snippet, we at Himmelberger Design were hoping for its return in MODx Revolution. This has not occurred. Out of this gaping hole, we made a work around using the SimpleSearch package and jQuery. In this post we will explain how we did this.

Creating a Search Chunk

First, we create a chunk to house the SimpleSearch snippet call and results container. We named our chunk site-search. Here's its content:

[[!SimpleSearchForm? &landing=`25`]]
<div id="site-search-results" class="search-results">
</div>

Take note of the &landing parameter. This is the ID of the page SimpleSearch will use to show the results. Normally the user is directed to this page upon submitting their search query. We're using AJAX!

Create the Landing Page

Create a resource, we named our search-results (exceedingly creative). Set the template to empty, set the resource to be hidden from menus, and put our SimpleSearch results snippet call in the content area:

[[!SimpleSearch]]
<script type="text/javascript">
if(typeof jQuery !== undefined) {						//Check for jQuery
    $(document).ready(function() {						//Run once loaded
	$(".sisea-page a").click(function(event) {				//Function to handle click events on our page links (linktext: 1,2,3,etc)
		event.preventDefault();						//Stops the browser from navigating away from the page
		$("#site-search-results").load($(this).attr('href')).show();	//Loads the next page of search results and shows the container (CSS display:block;)
      		return false;							//More "don't fire" insurance
    	});
    });
}
else {
        //no jQuery
}
</script>

This calls the SimpleSearch snippet to output our search results, the jQuery after the snippet call is for AJAX pagination. Once again, this assumes that you're using the default SimpleSearch tpls. That's it for this step.

AJAX using jQuery

Since we know the what the default SimpleSearch template looks like (if you don't, please see the link at the beginning of this post), this part is fairly simple. Here's our code:

$(document).ready(function() {												//Run once loaded
    $(".sisea-search-form").submit(function () {									//Handle submission
  	$("#site-search-results").load("/static-blocks/search-results.html",$(".sisea-search-form").serialize()).show();//Load search results from our landing resource and show the container
      return false;													//More "don't fire" insurance
    });
    $(".sisea-search-form input").keyup(function() {									//Live search functionality
      if(this.value.length > 2) {											//User types more than 2 characters in our search field
    	$("#site-search-results").load("/static-blocks/search-results.html",$(".sisea-search-form").serialize()).show();//Load search results from our landing resource and show the container
      }
      else {
      	$("#site-search-results").hide();										//If not more than 2 characters typed, make sure the results container is hidden (CSS display:none;)
      }
    });
});

You can use instead of the static path ("/static-blocks/search-results.html") if you include this in the chunk you created above, but we couldn't (someone was picky and wanted it in a .js file). The first part handles the SimpleSearch form submission by sending a request to our landing page using the serialized form data for the query. The second part handles "live search", sending a request when the user types at least 3 characters into the field, or hides the results container if there are not 3 or more characters.

Styling the Results

This is important, but simple enough to forget about. You may wish to have the search results container display:none;, that's what we did--among other things. Here's what ours looks like:

.search-area {
	width:300px;
	position:absolute;
	right:0;
	top:-32px;
	text-align:right;
	z-index:10;
}
.search-area fieldset {
	margin:0;
	padding:0;
	padding-right:10px;
}
.search-area .search-results {
	display:none;
	padding:15px;
	text-align:left;
	background:#F3F3F3;
	border:thin solid #ccc;

Feel free to change this up, use it as you want. We may consider putting out a package in the future, but as much as we like the credit, please beat us to it.