Drupal 6 user autocomplete search with images

I am sure most have used Drupal 6 autocomplete fields in some way. They are very handy for selecting/searching information. However, I recently wanted to take an autocomplete field and take it to the next level. Instead of just displaying text information, my goal was to create an autocomplete field in Drupal that would not only search the users on the site, but would also display their profile pictures next to the results. This technique is used on many social networking sites so I figured I would give it a shot. It turns out it is not really that difficult to do.

First things first, if you want to see a very simple example demo, take a look at http://demo.codekarate.com. You can also download the full code from the zip file attached to this post. I am going to walk through all the steps necessary to create the Drupal 6 user autocomplete search with images. You could then extend this autocomplete technique to many other areas (displaying node's with images, etc). OK, enough talk, lets get started.

Install the necessary modules

Before we can really begin, you need to make sure you have all the modules installed. Here is a list of the contributed modules you will need.

• imageapi
• Imagecache

Configure your Drupal 6 site correctly

Now lets configure the site. You need to make sure that users can upload images on your Drupal 6 website. You can do this by going to Admin -> User Settings and ensuring that profile images are turned on.

You will also need to create an image cache preset for displaying profile pictures. You can do this by going to Admin -> Imagecache and adding a new preset. You can set this to any size you want but in order to keep the autocomplete results consistent I suggest going with an exact size (using scale and crop). Some of the profile images may be cropped a little, however it makes sure the autocomplete results look the same.

Populate our Drupal site with Users

In this example, I am going to go ahead and create a few test users in order to give a good example. If you are lucky enough and your site already has users, then no problem, skip to the next section. If not, follow along to create some test user accounts.

Lets start by downloading the devel module. After downloading the devel module, enable Devel and Devel Generate. Go to Admin -> Generate Items -> Generate Users and continue on generating a few users (I went ahead and created 10).

In order to get the full effect of the autocomplete, I went to Admin -> User Management -> Users and went through the 10 users and added example profile images. This is a little tedious but is necessary to provide a good example.

Now that we are done with the tedious parts, lets get into the code.

Develop the Drupal 6 autocomplete module

Now it is time to start building the module. Lets start by creating the module directory. This will need to be placed either in the sites/all/modules directory or the sites/[yoursite]/modules directory (depending on if you are using a multi-site setup). Lets call this module user_autocomplete.

We will now create the user_autocomplete.info file and place the following contents in it:


name = "User Autocomplete"
description = Provides User Autocomplete search features
version = "6.x"
core = 6.x


Next we will create the user_autocomplete.module file.

/**
 * @file
 * user_autocomplete.module
 * Provides a nice user search autocomplete block
 */
 
/**
 * Implements hook_init().
 */
function user_autocomplete_init() {
  drupal_add_css(drupal_get_path('module', 'user_autocomplete') .'/user_autocomplete.css');
}
 
/**
 * Implements hook_menu().
 */
function user_autocomplete_menu() {
  $items = array();
  $items['user/autocomplete'] = array(
    'type' => MENU_CALLBACK,
    'access arguments' => array('access user profiles'),
    'page arguments' => array(2),
    'page callback' => 'user_autocomplete_autocomplete',
  );
 
  return $items;
}
 
/**
 * function for autocomplete user names in the invite block
 *
 */
function user_autocomplete_autocomplete($userString) {
 
  //Create the SQL query to search the users table
  $sql = "SELECT uid, name, picture FROM {users} u
    WHERE status = 1
    AND lower(name) like lower('%%%s%%')
    ORDER BY name ASC";
  $resource = db_query_range($sql, $userString, 0, 5);
 
  // loop through the results and create an associative array
  $results = array();
  while ($row = db_fetch_object($resource)) {
    $picture = "";
    if (isset($row->picture) && $row->picture != "") {
      $picture = theme('imagecache', 'profile_search', $row->picture, $row->name, $row->name);
    }
    $results[$row->name] = "<div class='user-listing'><div class='user-listing-left'>" . $picture .
      "</div><div class='user-listing-right'>" .
      "<div class='user-listing-name'>" . l($row->name, 'user/' . $row->uid) . "</div>" .
      "</div></div>";
  }
 
  // output the results in javascript
  print drupal_to_js($results);
 
  // exit, to prevent your results form hitting the theme layer
  exit();
}
 
/**
 * Implements hook_block().
 */
function user_autocomplete_block($op = 'list', $delta = 0, $edit = array()) {
  switch ($op) {
    case 'list':
      $blocks[0]['info'] = t('User Autocomplete Search Block');
      return $blocks;
    case 'view':
      switch ($delta) {
        case 0:
          $blocks['subject'] = t('User Search');
          $blocks['content'] = drupal_get_form('user_autocomplete_form');
          return $blocks;
          break;
      }
      return;
  }
}
 
/**
 * Form to search for a user
 */
function user_autocomplete_form(&$form_state) {
  $form['user_search'] = array(
    '#type' => 'textfield',
    '#title' => '',
    '#autocomplete_path' => 'user/autocomplete',
    '#size' => 40,
    '#maxlength' => 60,
  );
  $form['submit'] = array(
    '#type' => 'submit',
    '#value' => t('Search'),
  );
  return $form;
}
 
/**
 * Validate the form entries by user.
 */
function user_autocomplete_form_validate($form, &$form_state) {
  global $user;
 
  $user_name = $form_state['values']['user_search'];
  if ($user_name == '') {
    form_set_error('user_search', t('You must select a valid user name.'));
    return FALSE;
  }
  if (isset($user_name)) {
    $user_keys = array(
      'name' => $user_name
    );
    $user_loaded = user_load($user_keys);
    if (!isset($user_loaded->uid)) {
      form_set_error('user_search', t('You must select a valid user name.'));
      return FALSE;
    }
    $form_state['values']['user_object'] = $user_loaded;
  }
}
 
/**
 * Implements hook_form_submit.
 */
function user_autocomplete_form_submit($form, &$form_state) {
  $form_state['redirect'] = 'user/' . $form_state['values']['user_object']->uid;
}

Now to finish things off I will create a simple user_autocomplete.css file with some simple example css.

.user-listing {
  border-bottom: 1px dotted #222;;
  width: 100%;
  height: 30px;
}
.user-listing-left {
  float: left;
}
.user-listing-right {
  padding-left: 55px;
  display: block;
  height: 50px;
  width: 55%;
}
.user-listing a {
  font-size: 12px;
}
.user-listing-name a:hover {
  color: #000;
  text-decoration: underline;
}

This is just a very simple example of a way to build an autocomplete with some HTML output. Using the HTML output in the user_autocomplete_autocomplete function in tandem with some crafty CSS, and you will have a nice looking autocomplete field in no time. So go on and be creative building some fancy autocomplete fields in Drupal 6.

If you have any questions or examples you want to post, go ahead and say something in the comments.