Drupal - Autocomplete with node title and image

Today one of our clients wanted us to enhance product selector autocomplete field, and instead of displaying product name it should display name with product thumbnail. First thing on my mind was, its gonna take time + lot of AJAX and Jquery.

But as always in Drupal there is a module that does that! Half an hour later I delivered enhanced autocomplete to my client!

Here is how I did it:

  1. Download Finder module and enable Finder, Finder autocomplete and Finder node.
  2. Go to admin/build/finder and add new Node finder
  3. In settings check "Form on page" option and add autocomplete element/
  4. In autocomplete element field set this fields as per your needs. In my case it was:
  5. Restrict nodes that can be found to only these content types: Product
  6. Find items by this field: Node:Title
  7. Save it.
  8. Open finder_autocomplete.module in editor and edit theme_finder_autocomplete_suggestion function. In here you can render the display of autocomplete suggestions by changing this field: $option->finder_element_1_node_title

What I did is obtained nid from title (titles are unique in my case)
$nid = db_result(db_query("SELECT nid FROM {node} WHERE title = '%s' AND type='garment'",$option->finder_element_1_node_title));

Load image thumbnail for this product:
$img=_totcare_select_get_product_thumb($nid,FALSE); 
   
And replace title with title - thumbnail:
$option->finder_element_1_node_title= $option->finder_element_1_node_title." - ".$img;

And to create image thumbnail I made a function in custom module that loads image from node and resize it using uc_thumbnail (from Ubercart) imagecache preset. In case there is no image in node I use default thumbnail.

function _totcare_select_get_product_thumb($nid,$link=TRUE){
           $node=node_load($nid);
           if(!empty($node->field_image_cache[0])){
            $link=$node->field_image_cache[0]['filepath'];
            $img_link= theme('imagecache', 'uc_thumbnail', $link, '', '','');             
           }
           else{
                //Use default image link
                $img_link='<img src="'.base_path().drupal_get_path('module','totcare_select').'/images/default-product.png'.'"/>';
           }
            if($link){
                $img_link='<a target="_blank" href="'.base_path().'node/'.$nid.'">'.$img_link.'</a>';
            }
           
            return $img_link;
}

9. Go to preview your new autocomplete field at: /finder/1 

10. However what I need is to add this new autocomplete to my existing form. You can do it by stealing autcomplete path and adding it to your own form. For example my existing form had autocomplete fields as following:

$form['mytable']['row'.$counter]['title'.$counter] = array(
                '#type' => 'textfield',
                '#prefix' => '<td>',
                '#suffix' => '</td>',
                '#autocomplete_path' => 'totcare_select/products',
              );

All we need to do is replace #autocomplete_path with finder autocomplete path:

$form['mytable']['row'.$counter]['title'.$counter] = array(
                '#type' => 'textfield',
                '#prefix' => '<td>',
                '#suffix' => '</td>',
                //'#autocomplete_path' => 'totcare_select/products',
                '#autocomplete_path' => 'finder_autocomplete/autocomplete/1/1',
              );

Hint: How did I found finder autcomplete path? Just create a hook_form_alter in your custom module, debug and you will find it!

Tags: