Theming the autocomplete suggestions

A lot of people want the suggestions that appear in the autcomplete form to contain HTML output with images and links. This is possible, as you can see in the example screenshot on the Autocomplete Node Finder project page.

A warning, though - if you plan to get mixed up in fancy suggestions, please be sure to understand how theming in drupal work, and how to effectively use CSS. Without these skills you will have a very hard time working with this.

To get you started off here is a guide on how to use node teasers as the suggestions:

1. Place this theme function in the template.php of your theme, and change the 'theme_' part in the function name to the name of your theme, e.g. 'garland_'.

   /**
    * Theme a suggestion.  Return null/false to exclude suggestion.
    */
   
   function theme_autocomplete_node_finder_suggestion($match, $delta) {
     if ($match['form'] == 'autocomplete') {
       $suggestion = node_load($match['nid']);
       $output = node_view($suggestion, TRUE);
     }
   
     return $output;
   }
   

2. Add this CSS code to your stylesheets. You may want to target your forms more specifically than this.

   #autocomplete li.selected {
     background: #eee;
     color: inherit;
   }
   #autocomplete li {
     white-space: normal;
     margin: 0;
   }
   
   #autocomplete ul.links,
   #autocomplete ul.links li {
     background: none;
   }
   #autocomplete p {
     margin: 0;
   }
   

That should really be about it. You can add in extra CSS to change the look and layout of your forms, as well as the suggestion box contents. And if you're feeling tricky you could theme something more complex than a teaser.