An Autocomplete form: We all know we are lazy by nature and we want everything on their hand without any efforts or hard-work. This lead to thinking peoples to search for new technologies. So an auto-complete thing works the same in which people just put some data in a textfield and all the things will be done automatically (depends on input data). It's an Ajax thing which is used to exchange data from the server at the client site. When the client starts writing in the textfield then an auto-complete Ajax starts working on this input and exchange this input data with the server to display the result on the client side. This Autocomplete Ajax plays a big role when there is a bulk amount of data fetched from the server and the user will select only one value among these data so it will take much time. All the thing will be done on page load (page load time also increase) but if we user Ajax Autocomplete then data will fetch only when user want or start writing in textfield, this reduces processing time on the server and page load time.
Custom Ajax Autocomplete form in Drupal
We will create a custom module for custom Autocomplete form. When the user starts writing something in it then it will populate a list of users name. create a custom_module.info file under root_directory->sites->all->modules->custom_module and write this code in it.
name = Drupal auto complete form
description = Drupal auto-complete form for thedrupaler.in
version = 7.x-0
core = 7.x
package = Custom module
Now create custom_module.module under the above same folder and write this code in it
/**
* Implements hook_menu()
*/
function autocomplete_menu(){
$items = array();
$items['thedrupaler'] = array(
'page callback' => 'drupal_get_form',
'page arguments' => array('autocomplete_form'),
'access arguments' => array('access example'),
'type' => MENU_CALLBACK,
);
$items['thedrupaler/auto-complete'] = array(
'page callback' => 'ajax_autocomplete',
'access arguments' => array('access example'),
'type' => MENU_CALLBACK,
);
return $items;
}
/**
*function returns form elements
*/
function autocomplete_form($form, &$form_state) {
$forms = array();
$forms['title'] = array(
'#title' => t('Name'),
'#type' => 'textfield',
'#autocomplete_path' => 'thedrupaler/auto-complete',
);
$forms['submit'] = array(
'#value' => t('Save'),
'#type' => 'submit',
'#autocomplete_path' => 'thedrupaler/auto-complete',
);
return $forms;
}
/**
*function returns ajax auto-complete value
*/
function ajax_autocomplete($string) {
$matches = array();
// Some fantasy DB table which holds users
$query = db_select('users', 'u');
// Select rows that match the string
$return = $query ->fields('u', array('name'))
->condition('u.name', '%' . db_like($string) . '%', 'LIKE')
->execute();
// add matches to $matches
foreach ($return as $row) {
$matches[$row->name] = check_plain($row->name);
}
// return for JS
drupal_json_output($matches);
}
In the first function, we have defined 2 menu path. The 1st path on which our form will call and on the 2nd path is for our query function which will return the list of the user. You have noticed that in the 2nd function we have defined 2 form fields in which we have defined "#autocomplete_path" => 'thedrupaler/auto-complete'. This array value is used to call the path on which our 3rd function is working(query function) which is returning list of users.