How to implement Drupal AJAX Autocomplete

Mon, Mar 2, 2009 by Sae

AJAX helps you create better, faster and more user-friendly web applications with its Javascript and HTTP base. It allows the page content to be updated without reloading a whole page.

In Drupal, AJAX functionality is provided through functions in the Javasript file drupal.js, and some AJAX functions are supported by Drupal core.

I am going to explain the autocomplete which is one of the AJAX functions implemented in Drupal. When users type into a text filed, new data from the server is dynamically loaded and displayed as a list of matching options. Exchanging data beteween client and server, and updating the content are handled by the autocomplete.js. The textfield type form input has the #autocomplete_path attribute which is the path that the AJAX autocomplete script uses as the source for autocompletion. You can easily implement the AJAX autocomplete to your form using the #autocomplete_path attribute.

Implementing the autocomplete contains two parts:1) a form input textfield and 2) a handler function to parse the request and return a response. There are build-in autocomplete handler functions such as user_autocomplete() and taxonomy_autocomplete().

Here is a simple example of how to implement the autocomplete uisng the user_autocomplete() function.

function example_form(){  
  $form['item'] = array(   
    '#type' => 'textfield',   
    '#autocomplete_path' => 'user/autocomplete'  
    ); 
  }

 

This user/autocomplete path calls the user_autocomplete() function and loads matching user names.

Also, you can create a custom autocomplete handler to meet a need for your site. Let’s say you have a text field which asks users to select a node item on the site.

function example_form(){  
  $form['item'] = array(   
    '#type' => 'textfield',   
    '#autocomplete_path' => 'example/autocomplete' 
    ); 
  }

function example_menu($may_cache) {  
  $item[] = array(   
    'path' => 'example/autocomplete',   
    'callback' => 'example_autocomplete',   
    'access' => user_access('access example autocomplete')  
    ); 
  }

function example_autocomplete($string){
  $items = array();  
  $result = db_query("SELECT nid, title FROM {node} WHERE status = 1 AND title LIKE ''%s%%', $string");
  
  while($obj = db_fetch_object($result)) {
    $items[$obj->nid] = check_plain($obj->title);
  }
  print drupal_to_js($items); 
  exit();
}

 

User input is passed from the parameter and the array of matching items is printed as the response. Note that you need to escape the node titles using check_plain() because the values are HTML.

Also note that you need to use your autocomplete handler callback has proper access permission.It might be exposing some sensitive information on the site.

Sreedhar posted on August 31, 2010 5:20 am

Hi,
Thanks for the Above functionality. Its working fine in FF3 with Scroll bar. When i tried in other browsers autocomplete scrollbar is not working. Its disappearing. Can u pls do the needful.

Thank,
Sree

ali posted on April 24, 2010 4:55 am

very very helpful article
Thanks Sae

semperos posted on April 21, 2010 5:28 pm

I know it adds a little complexity, but the query string should first be wrapped by the db_rewrite_sql function, so that the results respect any permissions settings that might prevent a user from seeing certain nodes.

So:
$result = db_query(db_rewrite_sql("SELECT..."));

shushu posted on March 22, 2010 9:58 am

Thanks,
Your howto was very useful, and used as the basis to my solution.
See details here - http://drupal.org/node/578620#comment-2750454

Regards,
Shushu

Anonymous posted on January 12, 2010 3:00 pm

I think you have a typo in your query string. the quotes extend past the $string param.

Otherwise, very helpful article, thanks!

Haroon Sajjad posted on January 12, 2010 11:59 am

Thank you very much buddy. I really need this thing to implement on my site's search box. This is very help to me :).

God Bless You

Anonymous posted on April 30, 2009 6:58 am

Thank You for this article,this was useful to me.

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <img> <h2>
  • Lines and paragraphs break automatically.

More information about formatting options