Joomla 1.5 comes with a built-in site search component. The component allows you to create a “search” module for your website, which consists of an input field and a submit button that site visitors can use to search your site. When you create the search module, you can select an image to use in place of the “Submit” button. Search results are displayed in the site’s default template. What if you’d like to change the look of your search form in different parts of your site, however, and display results in more than one template? You can do it with a little bit of Mootools and an easy update to the search component’s controller.
Swap Search Button Images
A simple bit of Mootools will change the search button image:
window.addEvent('domready',function() {
$$('.button_mysite_search').each(function(el,index) {
if(index==0) {
// set the "src" of the submit button image to the new image
el.setProperty('src','/images/M_images/my-new-searchButton.gif');
}
});
});
The class “button_mysite_search” comes from the search module itself. “_mysite_search” is the module class suffix I assigned when I created the module in the administrator module manager. Joomla prepends “button” to the class suffix when it generates the search form and applies that class to the button input box.
Set Up An Alternate Template for the Search Results
Displaying search results in a different template requires a little bit more work. First, I’m going to add a hidden field to the search form to post the name of the template we’d like to use. I’ll use Mootools to add the field to the search form. (window.addEvent is assumed in the code snippet below.)
if($('mysite-search')) {
var search = $('mysite-search');
var el = new Element('input',{
'type':'hidden',
'name':'template',
'value':'alternate_search_results'
});
var form = search.getElement('form');
form.adopt(el);
}
In this case, the id comes from the template where the search form is displayed and belongs to a div that wraps the search module. Using Mootools element constructor, I’ve created an input field whose type is “hidden” and whose name is “template.” I’ve assigned the value of the hidden field to the template I want to use to display my search results. When the form is submitted, the template name will be posted along with the other post parameters.
Now I have to update the search component controller to set the template to the one posted with the search form. Add the following snippet of code as the first few lines of the search function in mysite/components/com_search/controller.php:
// Get the template from the request
$post['template'] = JRequest::getWord('template',null,'post');
// Specify a default template to use for search results if the template is not included in the post
if($post['template'] == null || $post['template'] == '') {
$post['template'] = 'mysite_default template';
}
Hi I’m just getting started with Joomla so bear with my newbiness
. To swap search button images, do I have to put that code in custom.css? How do I access mootools in Joomla?
emjay, to swap search button images, you must include mootools and the snippet of code I provided in the <head> section of your template. As far as including mootools, you do that as you would in any other script or page:
<script type=”text/javascript” src=”path-to-mootools” ></script>
You can include the code snippet in the template itself just after the script tag where you pull in mootools or put it in a separate .js file and include it as you would any other javascript file.
Thank you for a great article!!
I have been struggling for sometime to find an article on search and the manipulation of the search function in joomla.
I have a more complex question: I would like to implement the build in search function, however I need two levels of complexity:
1) Normal search: This is the normal search functionality, which will publish the result into a different component of the template. Thank you for the information above.
2)Advanced search: This functionality will have different fields in the database that it will search. So it will act like a filter either to include or exclude certain user input criteria. For example if a person wanted to include articles from America or England, they would select those pre-populated countries from a list and the search would only include those results that meet the criteria. The search would also have a selection to include or exclude articles with the word “fun” in the title and “Water” in the body.
Could you possible write an article on this, I am keen to understand how this would be done.
Thanks again so much for this article, it is easy to read and well explained.
Johnny2Sips (Joomla Newbie)
Jimmy — I would start in two places. The first (and easiest) is to look through the Joomla extensions and see if there is a Joomla plugin already built that allows you to customize search in the way you describe. There’s an entire section on search and indexing. You may find something there that will work well for you. If you don’t find anything there, you could head on over to the developer’s section of the Joomla site. There is a section there on how to build a plugin.
Thank you for your comment!