Scribd
Upload
364 views4 pages

AJAX Autocomplete On Drupal 7 Webform Textfield

This tutorial demonstrates how to implement Drupal's native AJAX autocomplete widget on a Webform textfield. It involves writing a custom module with a .info file and .module file that implements hook_form_alter() to add the #autocomplete_path property and hook_menu() to declare a path callback. The callback queries the database for node titles and returns them as a JSON object to populate the autocomplete suggestions.

Uploaded by

SetyawanWawan78
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
364 views4 pages

AJAX Autocomplete On Drupal 7 Webform Textfield

This tutorial demonstrates how to implement Drupal's native AJAX autocomplete widget on a Webform textfield. It involves writing a custom module with a .info file and .module file that implements hook_form_alter() to add the #autocomplete_path property and hook_menu() to declare a path callback. The callback queries the database for node titles and returns them as a JSON object to populate the autocomplete suggestions.

Uploaded by

SetyawanWawan78
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

AJAX Autocomplete on Drupal 7 Webform Texteld

Enable AJAX autocomplete on a Drupal 7 Webform texteld


May 20
This tutorial demonstrates how to implement Drupal's native AJAX autocomplete widget on a
Webform texteld. To follow along you will need a working copy of Drupal 7
[1]
, the Webform
[2]
module, a published webform with a texteld named 'node', and some dummy node content. This
tutorial was authored using Drupal 7.0 and Webform 7.x-3.11.
To accomplish this task we're going to write a custom module named Demo that consists of two
les: demo.info and demo.module. Both demo.info and demo.module reside in a folder
apropriately named demo that I've placed in sites/default/modules to help differentiate it from
contributed modules (like Webform).
Here's the nished code, but read on if you'd like a more detailed explanation of the functionality
involved.
demo.info
;$Id$ 1.
name = Demo 2.
description = Enables Drupal core AJAX autocomplete widget for a Webform texteld. 3.
core = 7.x 4.
package = Webform 5.
dependencies[] = webform 6.
les[] = demo.module 7.
demo.module
http://www.elevatedthird.com/blog/enable-ajax-autocomplete-drupal-... 1 of 4
<?php 1.
* Implements hook_form_alter(). 2.
function demo_form_alter(&$form, &$form_state, $form_id) { 3.
if ($form_id == 'webform_client_form_1') { 4.
//add autocomplete handler for properties 5.
$form['submitted']['node']['#autocomplete_path'] = 'node/autocomplete'; 6.
* Implements hook_menu(). 7.
function demo_menu() { 8.
$items = array
[3]
(); 9.
$items['node/autocomplete'] = array
[4]
( 10.
'title' => 'Node autocomplete', 11.
'page callback' => 'node_autocomplete', 12.
'access callback' => 'user_access', 13.
'access arguments' => array
[5]
('access content'), 14.
'type' => MENU_CALLBACK, 15.
return $items; 16.
* Retrieve a JSON object containing autocomplete suggestions for node titles. 17.
function node_autocomplete($string = '') { 18.
$matches = array
[6]
(); 19.
$result = db_select('node') 20.
->elds('node', array
[7]
('title')) 21.
->range
[8]
(0, 20) 22.
->execute(); 23.
foreach ($result as $node) { 24.
$matches[$node->title] = check_plain($node->title); 25.
drupal_json_output($matches); 26.
Now we'll break down the different steps involved in accomplishing our task.
demo.info
;$Id$ 1.
name = Demo 2.
description = Enables Drupal core AJAX autocomplete widget for a Webform texteld. 3.
core = 7.x 4.
package = Webform 5.
dependencies[] = webform 6.
les[] = demo.module 7.
To begin, we have our demo.info le that tells Drupal a little about our custom module. It's pretty
self-explanatory, and the only thing to note is that it declares Webform as a dependency. This
means that Drupal won't allow you to enable this custom module without Webform being enabled
as well.
http://www.elevatedthird.com/blog/enable-ajax-autocomplete-drupal-... 2 of 4
With the .info le out of the way, we can get on to the fun stuff.
demo.module
* Implements hook_form_alter(). 1.
function demo_form_alter(&$form, &$form_state, $form_id) { 2.
if ($form_id == 'webform_client_form_1') { 3.
//add autocomplete handler for properties 4.
$form['submitted']['node']['#autocomplete_path'] = 'node/autocomplete'; 5.
The preceding code block implements hook_form_alter()
[9]
so that we can add the
#autocomplete_path attribute to our form eld. The attribute species the path that the
autocomplete script will execute against to generate the sourcedata for the autocomplete widget.
demo.module
* Implements hook_menu(). 1.
function demo_menu() { 2.
$items = array
[10]
(); 3.
$items['node/autocomplete'] = array
[11]
( 4.
'title' => 'Node autocomplete', 5.
'page callback' => 'node_autocomplete', 6.
'access callback' => 'user_access', 7.
'access arguments' => array
[12]
('access content'), 8.
'type' => MENU_CALLBACK, 9.
return $items; 10.
The preceding code block implements hook_menu()
[13]
and declares a callback function
(node_autocomplete) for any requests for the properties/autocomplete path (declared in
demo_form_alter() above).
demo.module
* Retrieve a JSON object containing autocomplete suggestions for node titles. 1.
function node_autocomplete($string = '') { 2.
$matches = array
[14]
(); 3.
$result = db_select('node') 4.
->elds('node', array
[15]
('title')) 5.
->range
[16]
(0, 20) 6.
->execute(); 7.
foreach ($result as $node) { 8.
$matches[$node->title] = check_plain($node->title); 9.
drupal_json_output($matches); 10.
http://www.elevatedthird.com/blog/enable-ajax-autocomplete-drupal-... 3 of 4
http://drupal.org/project/drupal 1.
http://drupal.org/project/webform 2.
http://www.php.net/array 3.
http://www.php.net/array 4.
http://www.php.net/array 5.
http://www.php.net/array 6.
http://www.php.net/array 7.
http://www.php.net/range 8.
http://api.drupal.org/api/drupal/modules--system--system.api.php/function/hook_form_alter/7 9.
http://www.php.net/array 10.
http://www.php.net/array 11.
http://www.php.net/array 12.
http://api.drupal.org/api/drupal/developer--hooks--core.php/function/hook_menu/6 13.
http://www.php.net/array 14.
http://www.php.net/array 15.
http://www.php.net/range 16.
The nal function in our module queries our database and returns 20 node titles. The
autocomplete widget uses JavaScript, so after the $matches array has been populated we then
convert the output to json and presto!
By default, the Drupal 7 core provides the necessary functionality to implement the autocomplete
widget for users and taxonomy (Hint: search the Drupal 7 core for '#autocomplete_path'). With
that in mind, outside of a quick hook_form_alter all I needed to do was appropriate the existing
code and then tweak it to my needs.
That wraps up this tutorial and I hope you enjoyed it. Comments, questions and critiques are
always welcome in the comments section below.
http://www.elevatedthird.com/blog/enable-ajax-autocomplete-drupal-... 4 of 4

You might also like