Get in touch
Call 07974 744090, skype digitaldelivery, email Steven@digitaldelivery.co.uk.
Recent downloads
EE Custom Search Results
27/03/2009
This is a simple but handy technique to achieve a more structured search results page in a site running Expression Engine - No doubt to be made redundant by the arrival of EE2.0.
So we have our Expression Engine site customised, we have two or three weblogs established to enable content management and presentation of different content types. We have custom templates and CSS. Everything looks great. But wait – when we do a search all our weblogs are jumbled together in a single results table. Do we create a more complex search form, multiple search forms, or a neater results page? We can't trust the visitor to pick the correct search form - so for public sites I'd go for a more structured results page.
All we want to do is separate out the News from the Vacancies and the “Proper pages” with just one submission of a generic search box, and all on a single results page.
Something like this:
Lets take those two separately. First - the cleaner search result page in Expression Engine. A lot of the EE sites I see have done a minimal style job on the search results - wrapping the results template in a head / foot template and perhaps updating the colors. Going a little further makes our job much easier.
Look for the {exp:search:search_results} in your search results template, and expand out to all the table markup wrapping it. Remove all that code and replace with this little snippet:
<div id=”search_results”>
{exp:search:search_results}
<div class="result">
<h4><a href="{auto_path}">{title}</a></h4>
<p>{excerpt}<br />
<a href="{auto_path}" title="view {title}">view result</a> </p>
</div>
{/exp:search:search_results}
</div>
This has no impact on the content or ordering of the search - the results are identical to those in the original page - we have just changed the markup that presents them. This get's rid of the standard tabulated results, and presents a much softer results listing which gives more CSS flexibility. It should also slot into your site template more readily than a wide table. It also makes it very obvious how you can change the listings by removing the excerpt, changing 'view results' etc...
To restyle the individual result elements depending on weblog - just change line 3 to...
<div class="result {weblog}">
... and create some CSS for those new classes which are named after the weblog. Remember, weblog indicates the type of page you have found in the search. If you do nothing else, just add a background color in your css to see how it works.
So that simplifies the results lists and visually indicates the result type - now how to split it into columns.
The simplest way to achieve our desired effect is to use a simple {if…} tag to filter the full search listing.
So our search page markup becomes:
<div id=”search_results”>
<div id=”main_results”>
{exp:search:search_results}
{if weblog=="blog"}
<div class="resultItem clearFix">
<h4><a href="{auto_path}">{title}</a></h4>
<p>{excerpt}</p>
<p><a href="{auto_path}" title="view {title}">view result</a></p>
</div>
{/if}
{/exp:search:search_results}
</div>
<div id=”news_results”>
{exp:search:search_results}
{if weblog=="news"}
<div class="resultItem clearFix">
<h4><a href="{auto_path}">{title}</a></h4>
<p>{excerpt}</p>
<p><a href="{auto_path}" title="view {title}">view result</a></p>
</div>
{/if}
{/exp:search:search_results}
</div>
<div id=”job_results”>
{exp:search:search_results}
{if weblog=="jobs"}
<div class="resultItem clearFix">
<h4><a href="{auto_path}">{title}</a></h4>
<p>{excerpt}</p>
<p><a href="{auto_path}" title="view {title}">view result</a></p>
</div>
{/if}
{/exp:search:search_results}
</div>
</div>
Now we have a clean, simple search layout which separates our content types. Add a little CSS for a 3-col layout and we are there.
Performance
A word of warning. This entails looping the search results three times instead of once - more if you have more result types to present. This has an impact on render time - in my opinion the impact isn't worth worrying about for most sites - but be aware of it.
If you have a busy site where this is a concern I'd be tempted to use a single loop with the class approach in the first part of this post and write a few lines of JQuery to rearrange the content at the browser. Without javascript the user still gets the well styled, specific results - they just don't get the column presentation.
Pagination, displaying a 'no jobs' message in the third column when nothing matches, and how to handle individual counts for each column I'll leave to your imagination. This isn't NetTuts!
Comments?
I've turned off comments on Digital Delivery. If you'd like to get in touch about EE Custom Search Results please email me, or tweet @stevenmilne.