Categories

(83)
(69)
(8)
(34)
(74)
(149)

#autocomplete_path in textfield elements

11.04.2011
#autocomplete_path in textfield elements
Author:

Sometimes in the web development process, the need arises to create an autocomplete field in order to enhance usability. As worked examples of such fields, widgets for cck-fields Node reference and User reference can be mentioned.

Let's look at some attempts of program creation of such fields. According to Drupal Forms API reference #autocomplete_path function can be added only for text field element. This feature will identify the path through which Drupal JavaScript-code that is automatically turned on will send HTTP-requests, using JQuery.

First of all, we'll announce text field in the form:

php
$form['example'] = array( 
  '#type' => 'textfield', 
  '#title' => t('Example Textfield'), 
  '#autocomplete_path' => 'products/autocomplete', 
);

Now we'll identify callback for autocomplete in hook_menu():

php
/** 
 * Implementation of hook_menu 
 */ 
function module_menu() { 
  $items['products/autocomplete'] = array( 
    'page callback' => 'module_products_autocomplete', 
    'type' => MENU_CALLBACK, 
    'access arguments' => array('administer nodes'), 
  ); 

  return $items; 
}

Finally, we must describe callback function itself that will transfer some array of drupal_json() function:

php
function module_products_autocomplete($string) { 
  $matches = array(); 
  $res = db_query("SELECT title, nid FROM {node} WHERE LOWER(title) LIKE LOWER('%s%%')", $string);

  while ($row = db_fetch_array($res)) { 
    $matches[$row['nid']] = $row['title']; 
  } 
  drupal_json($matches); 
}

Now we have a full-blown autocomplete field.

Quite often, though, there is a need to pass some parameters of the autocomplete function. In my case, there was a need to pass an array of node identifications and to limit the scope of nodes to only this array in autocomplete. For this reason, we'll identify page arguments in hook_menu() for that:

php

/** 
 * Implementation of hook_menu 
 */ 
function module_menu() { 
  $items['products/autocomplete/%'] = array( 
    'page callback' => 'module_products_autocomplete', 
    'page arguments' => array(2), 
    'type' => MENU_CALLBACK, 
    'access arguments' => array('administer nodes'), 
  ); 

  return $items; 
}

Let's make some amendments in the autocomplete_path settings for text field definition:

php
//we get $nids array with identificators of nodes 
$string_nids = implode('|', $nids); 
$form['example'] = array( 
  '#type' => 'textfield', 
  '#title' => t('Example Textfield'), 
  '#autocomplete_path' => "products/autocomplete/{$string_nids}",
);

$string parameter is being automatically passed to autocomplete function with the help of API. If you want to pass additional parameters, place them before $string:

php
function module_products_autocomplete($arg2, $string) { 
  $matches = array(); 
  $nids = explode('|', $arg2); 
  $res = db_query("SELECT title, nid FROM {node} WHERE LOWER(title) LIKE LOWER('%s%%') AND nid IN (" . db_placeholders($nids, 'int') . ")", array_merge(array($string), $nids));

  while ($row = db_fetch_array($res)) { 
    $matches[$row['nid']] = $row['title']; 
  } 
  drupal_json($matches); 
}

Drupal will visualize all above-mentioned the following way:

10 votes, Rating: 5

Read also

1

The use of batch operations ebables forms processing to be performed in the...

2

In this article I'm going to describe how to operate the main hooks of Fields API entity.

Fields API is one of the entities of Drupal 7 API that allow us:

to create customizeable...

3

Fast page upload onto the user's browser is a key factor of your site's popularity. If page load time appears to be tiresomely long, it decreases visitor/user engagement and may even induce a user...

4

SSH is a network protocol of session layer that allows remote control of operating system and tunneling of TCP-connection (e.g. for files exchange).

5

If you know what jQuery is or you just start studying it, then you’ll definitely be interested in how to write your own jQuery plugin. It’s very easy to do that. You’ll be able to create your own...

Subscribe to our blog updates