Autocomplete Drupal Form Tutorial

April 12th, 2013
4minuteread
#DrupalDevelopment

How does this work?

An autocomplete field lets the user choose from a list of items that closely match what they're currently typing. When you have a long list of items retrieved from the Drupal database, this field might come in handy - avoiding a mile-long, hard to navigate select list.

I will use an autocomplete field of articles for this example. To make this field work, we'll need to create a page that will fetch all of the articles that closely match what the user is typing. So, if the user is starting to type "e", we'll select all of the articles that closely match "e" such as an article named "Example" and others.  First, create an autocomplete field.

hook_menu()

Go to the .module file in your custom drupal module. You'll need to implement hook_menu, which basically tells drupal what function to call when a certain URL is accessed. The first component of this hook will tell Drupal that the URL www.yoursite.com/custom_form will call the createForm() function:

// hook_menu implementation
function mymodule_menu() {
  $items = array();
 
  $items['myform']  =   array(
    'title' => 'My Form',
    'description' => 'A sample form',
    'page callback' => 'drupal_get_form',
    'page arguments' => array('createForm'),
    'access arguments' => array('access content'),
    'type' => MENU_NORMAL_ITEM,
  );
 
  return $items;
}

Note: The 'access arguments' argument basically tells drupal who's going to be able to access the content you're creating. In our case, we want everyone to see it, so if the user has access to general site content, he'll have access to your custom form. If you wish to make this form accessible only by administrators, replace 'access arguments' with the following:

'access arguments' => array('access administration pages');

createForm()

This function will create our custom form:

function createForm() {
  $form = array();
  // Autocomplete field
  $form['autocomplete'] = array(
    '#type' => 'textfield',
    '#title' => 'Autocomplete field',
    '#description' => 'Autocomplete field example',
    '#autocomplete_path' => 'article/autocomplete',
  );
 
  // Form Submit button
  $form['submit'] = array(
    '#type' => 'submit',
    '#value' => t('Send'),
    '#validate' => array('validate_message'),
  );
  return $form;
}

The implementation of the autocomplete field is the same as a text field implementation with one exception. The difference is the #autocomplete_path attribute in the array. This attribute tells drupal that that is an autocomplete field and to call the article/autocomplete URL. This URL will fetch all of the articles that closely match what the user  is currently typing. Now, we need to create the page that will perform this operation. So, we're:

Back to hook_menu():

Add the following before the "return $items" in the hook_menu implementation above:

$items['article/autocomplete'] = array(
  'title' => t('AutoComp Menu'),
  'page callback' => 'selectAllArticles',
  'access arguments' => array('access content'),
  'type' => MENU_CALLBACK,
 ); 

This block is telling drupal that we're creating a page located at www.yoursite.com/article/autocomplete which will call the function selectAllArticles().

selectAllArticles() 

This function is called when the article/autocomplete page is accessed. It should fetch all of the articles that closely resemble the argument being sent to the page.

function selectAllArticles($string) {



  $result = db_query("SELECT title FROM {node} WHERE title LIKE '%$string%' LIMIT 10");

  $matches = array();

  foreach($result as $item) {

    $matches[$item->title] = check_plain($item->title);

  }

  drupal_json_output($matches);

  exit;

}

 

FINAL RESULT

When we hit the www.mysite.com/myform URL, we should now see the autocomplete field and the submit button. When you start typing on that field, it should now show at least 10 articles that closely match what's being typed. If you're curious, you should hit the autocomplete page we've created at article/autocomplete. If you hit it as is, nothing will happen, but if you hit article/autocomplete/a you'll see that the page is fetching articles that closely resemble the string "a". That page is basically being called via AJAX every single time the user types something in that field.

Let me know if you have any questions or troubles implementing this, I'll be happy to help.

About The Author