Using Drupal's autocomplete on a custom form element

Submitted by Jochus on Mon, 10/01/2011 - 10:23 | Posted in: Drupal

Did you ever created a custom form? A place where you couldn't use the Form API of Drupal?
Imagine this form, and you want to create an autocomplete feature on the nickname. The moment you start typing a nickname, a list of usernames get in the textfield.

<form action="/foo">
   ...
   <input type="text" value="Nickname"></input>
   <input type="submit" value="Submit"></input>
</form>


Step 1: adjust the HTML code

  • Start from a normal text field

<input id="txt-existing-bidder" type="text"></input>

  • Add attributes to normal text field

<input id="txt-nickname" type="text" class="form-text form-autocomplete text"
       autocomplete="OFF"></input>

  • Add a hidden value to capture the autocomplete values. Put this field immediately after the textfield

<input class="autocomplete" type="hidden" id="txt-nickname-autocomplete"
       value="/##path_to_autocomplete##"/autocomplete" disabled="disabled" />


Step 2: adjust the Javascript code

  • You need the following JS files to have a fully working version:
    drupal_add_js("misc/autocomplete.js");
    drupal_add_js("misc/ahah.js");
  • If the HTML (see above) is added by AJAX, Drupal's autocomplete will not discover the autocomplete fields. Therefore, execute following code after loading the AJAX call
    Drupal.attachBehaviors($("##CONTEXT##"));

    ##CONTEXT##: reference to a div which hold the input


Step 3: create a autocomplete PHP function which returns a JSON object

/**
 * Searches all auction users and returns a JSON object of all users
 * @param $search the value to be searched
 * @return JSON object with all users
 */
function autocomplete_users($search = '') {
        // TODO: implement search function here
 
        // DEBUG
	$users['admin {uid:1}'] = 'admin';
	$users['jochen {uid:2}'] = 'jochen';
 
	return drupal_json($users);
}


Step 4: the result

Comments

Submitted by ropiafoldetnez… (not verified) on Mon, 28/02/2011 - 02:31
 

hi!

that's a fine step by step;

i was looking exactly for something like this;

is it possible to create a function maped directly to "/##path_to_autocomplete##"/autocomplete" instead of creating a file for it?

thx

Submitted by ropiafoldetnez… (not verified) on Tue, 01/03/2011 - 12:34
 

In reply to by ropiafoldetnez… (not verified)

ok, i found hook_menu, that makes what i need;

thx

Submitted by Jochus on Tue, 01/03/2011 - 18:26
 

Hi Ropiafoldetnezi,

Sorry for the late reply. I hope you could fix it with hook_menu()?

Regards,
Jochen

Submitted by ropiafoldetnez… (not verified) on Tue, 01/03/2011 - 18:33
 

In reply to by Jochus

yes,

i am playing with 'theme callback' now ;)

thx

Submitted by Reda (not verified) on Mon, 04/04/2011 - 17:26
 

"id you ever created a custom form? A place where you couldn't use the Form API of Drupal?"
Very, very bad practice. ALWAYS use Form API adn i can't think of any case that form API does not support.

I have tried this tutorial, it works in drupal 6, but in drupal 7 I got this error:
TypeError: '[object Object]' is not a function (evaluating 'Drupal.behaviors($('##CONTEXT##'))')
I use the input div id for the context.

Submitted by Jochus on Fri, 06/04/2012 - 19:03
 

This blogpost should be removed :-$ ... I'm getting really good in Drupal now, and I must agree with Reda: you CAN do everything with the Forms API! Don't try to do it manually :-( ... This is a very bad post!

Submitted by sant3001 (not verified) on Sat, 09/05/2015 - 01:43
 

Thank you so much! This was really helpful... I just had to replace ahah.js with ajax.js (for Drupal 7) and it all worked like a charm.

Add new comment

The content of this field is kept private and will not be shown publicly.

Full HTML

  • Lines and paragraphs break automatically.
  • You can caption images (data-caption="Text"), but also videos, blockquotes, and so on.
  • Web page addresses and email addresses turn into links automatically.
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <bash>, <cpp>, <css>, <html5>, <java>, <javascript>, <php>, <sql>, <xml>. The supported tag styles are: <foo>, [foo].
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.