A simple ExpressionEngine search page

Thursday, January 25th, 2007

Expression Engine provides a handy search module that provides an easy mechanism for adding a search facility to your site.

This first article implements a simple search box and results page.

Create the search box

This is a simple variation of the Simple Search Form from the EE documentation. This could be put into its own template or more likely be part of a global header embedded into every page.

{assign_variable:my_weblog="default_site"}
{assign_variable:my_template_group="site"}

{!-- your page header --}

{exp:search:simple_form weblog="{my_weblog}"}

<div class="row">
<label for="keywords">Search:</label>
<input type="text" class="text" name="keywords" id="keywords" value="" size="18" maxlength="100" />
</div>

<div class="row">
<div class="spacer">&nbsp;</div>
<input type="submit" class="button" value="Search" />
</div>

{/exp:search:simple_form}

{!-- your page footer --} 

An optional result_page=“search/results” can be added to the exp:search:simple_form tag to specify the search results page.

An example search box can be seen here.

The search results page

This will be in its own template (eg, search/results) wrapped in the site’s header and footer.

For usability we could include the search box again (with the search term filled in):

{!-- your page header --}

{exp:search:simple_form weblog="{my_weblog}"}

<div class="row">
<label for="keywords">Search:</label>
<input type="text" class="text" name="keywords" id="keywords" value="{exp:search:keywords}" size="18" maxlength="100" />
</div>

<div class="row">
<div class="spacer">&nbsp;</div>
<input type="submit" class="button" value="Search" />
</div>

{/exp:search:simple_form} 

Before displaying the results:

<p>Searching for: <b>{exp:search:keywords}</b> found {exp:search:total_results} results.</p>

{exp:search:search_results}

<dl>
<dt><a href="{auto_path}">{title}</a></dt>
<dd>{excerpt}</dd>
</dl>

{/exp:search:search_results}

{if paginate}

<div class='paginate'>
<span class='pagecount'>{page_count}</span>&nbsp; {paginate}
</div>

{/if}

{!-- your page header --} 

This will display the search results in a simple, definition list.