Last updated 26 January 2011. Created on 26 January 2009.
Edited by danielb. Log in to edit this page.

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.

Looking for support? Visit the forums, or join #drupal-support in IRC.


ñull’s picture

This is deprecated because the module is. It would be good to provide documentation how to do this with the Finder module, because as far as I can tell it is still missing.