David Slack - Web developer

The Drupal in built search is ok for most things, but wouldn't you want something a bit better? How about a search that doesn't just search the titles? How about a list that appears as you type?

You can add some modules to do this, the first we will use is called Finder

First of all install the module in the usual way making sure you enable all the Finder modules except Finder String Translation (this is used on multilingual sites).

Now, we want to have Finder used instead of the normal Drupal search and have a dropdown as the user types.

Images

If you've followed along you should have used ImageCache for your images. We'll use that to create a new image for Finder to use. If you don't have ImageCache click here to find out how to install it.

Now to create a nice small image to use for Finder

1. Login to your website
2. Click 'Administrator' on the left
3. On the right click 'ImageCache'
4. Click 'Add new preset' at the top
5. Type 'finder-image' in the box (we can't add a px size for the name, we might change it later)
6. Hit the Save preset button at the bottom
7. Click 'Add Scale And Crop' from the list
8. Type 40 in both the width and height boxes
9. Press the Update Action button at the bottom

We now have an image preset we can use for the Finder Autocomplete list

Configure

Now we need to configure the Finder

1. Login to your website
2. Click 'Administrator' on the left
3. Click 'Finder' on the right (just above ImageCache) - NB If its not there check you permissions
4. From the Select a finder pulldown choose Node finder and click the Add finder button
5. In the Title box type "Site Search"
6. In the description type "Search all the nodes on the site"
7. Path is "search/all"
8. Tick Provide Block
9. Under 'Advanced' select "Disjunction - Match any element using the OR operator."
10. Select "Attempt to fetch results from a content search when finder results are empty."
11. Select "Redirect to the only result, or show results page if there are multiple results."
12. Under 'Advanced' untick "Show finder links" and "Show finder admin links"
13. Hit the Save finder button at the bottom

At this point we have a basic Finder in a block ready to add to the site but it won't do anything until we add an element.

If you've moved off the page go to www.example.com/admin/build/finder/1/edit

1. Scroll to the bottom of the page and in the Add element box choose the Autocomplete texfield
2. Click the Save finder box
3. In the Title box type "Search"
4. Under 'Form element' select "Contains - Autocomplete suggestions contain the typed keywords."
5. Tick the "Submit upon selection" box
6. In the "Find items by this field" selection, select Node: Body
7. Tick "Published"
8. Tick "Sort options"
9. Tick "Choices per result"
10. Under 'Submitted values' put a space in the 'Treat delimited values as separate keywords upon submission:' box
11. Select "Disjunction - Match any value/field using the OR operator."
12. Select "Contains - Results contain the submitted values."
13. Click the Save finder element button at the bottom

Block

Now all we have to do is move the block containing the search into the header. To do this:

1. Login to your website
2. Click 'Administrator' on the left
3. Click 'Blocks' on the right
4. Drag the 'Finder: Site Search' into the header by grabbing the arrows on the left and dragging it up.
5. Hit the Save block button at the bottom

Code

Now we will add the code to make the list appear as we want it. Open cPanel and File manager (or your editor of choice)

1. Go to your theme folder which will be in www.example.com/sites/all/themes/YOUR-THEME-NAME/
2. Open the file 'template.php' in the editor
3. Scroll to the bottom and add:
   {syntaxhighlighter brush: php;fontsize: 100; first-line: 1; }/** * Autocomplete for the finder should output an image and title */ function YOUR-THEME-NAME_finder_autocomplete_suggestion($match, $delta) { $node = node_load($match->nid); $nodeTitle = check_plain($node->title); $imagePath = $node->field_main_image[0]['filepath']; $result_html = '<a href="/' .$node->path .'">'; if($imagePath) { $result_html .= theme('imagecache', 'finder-image', $imagePath, $nodeTitle, $nodeTitle); } $result_html .= $nodeTitle; $result_html .= "</a>"; return $result_html; }{/syntaxhighlighter}
4. Change the YOUR-THEME-NAME to the name of your theme
5. Save template.php to the server

It all works now as it should but now we need to format it

CSS

Now we need to make the new search look and feel right so

1. Go to your theme folder which will be in www.example.com/sites/all/themes/YOUR-THEME-NAME/
2. Open up your style.css file and add the following to the bottom
   {syntaxhighlighter brush: css;fontsize: 100; first-line: 1; }.block-finder h2{position:absolute; left:-9999px; top:-9999px; display:none} .block-finder #autocomplete{background:#FFF} .block-finder #autocomplete li a{padding:5px; background:#FFF; display:block;} .block-finder #autocomplete li img{border:1px solid #000; margin:5px 5px 5px 0; float:left}{/syntaxhighlighter}
3. Save the file to the server

Error

There is an error with the Finder module that causes problems for your users / customers. When a user types something into the search box the module will go up to the database and try to finish what the user is typing; called Autocomplete. If the user submits before the results come back from the database an error is created and shown to the user. This, to any user, looks like the site is bugged and can end in a user not trusting the site.

There is an easy fix for this as shown here

Open .../finder/modules/finder_autocomplete/finder_autocomplete.js and at around line 295 change this:

{syntaxhighlighter brush: jscript;fontsize: 100; first-line: 1; }}, error: function (xmlhttp) { alert(Drupal.ahahError(xmlhttp, db.uri));{/syntaxhighlighter}

to this:

{syntaxhighlighter brush: jscript;fontsize: 100; first-line: 1; }/*}, error: function (xmlhttp) { alert(Drupal.ahahError(xmlhttp, db.uri));*/{/syntaxhighlighter}

The creators of the module think this is okay because it is a Drupal error handler, not a Finder handler, I, like my users, think this is a usability problem and an error handler too far! So, each time you upgrade the module you must redo this.