I have created a custom form using (Drupal form API). It has email field as autocomplete.

//implements hook_menu
function mymodule_hook_menu() {

$items['add-form'] = array(
                'title' => 'Submit request to add chapter.',
                'description' => 'Submit request to add chapter.',
                'page callback' => 'drupal_get_form',
                'page arguments' => array(
                ) ,
                'access callback' => TRUE,

$items['my/email/autocomplete'] = array(
                'page callback' => '_my_email_autocomplete',
                'access callback' => TRUE,
                'type' => MENU_CALLBACK
        return $items;

function my_form($form, &$form_submit)
        $form['email'] = array(
                '#title' => 'email',
                '#type' => 'textfield',
                '#required' => TRUE,
                '#size' => 50,
                '#description' => t('Enter your valid email'),
                '#autocomplete_path' => 'my/email/autocomplete',
                '#attributes' => array(
                       'placeholder' => t('[email protected]')
        $form['submit'] = array(
                '#type' => 'submit',
                '#value' => 'Submit'
        return $form;

function _my_email_autocomplete($string) {

  $matches = array();
  // Some fantasy DB table which holds cities
  $query = db_select('my_table', 'a');

  // Select rows that match the string
  $return = $query
    ->fields('a', array('email'))
    ->condition('a.email', '%' . db_like($string) . '%', 'LIKE')
    ->range(0, 10)

  // add matches to $matches  
  foreach ($return as $row) {
    $matches[$row->email] = check_plain($row->email);
  // return for JS

For some reason there are two loading icon in the email field, as shown in the screenprint below:

enter image description here

The upper icon is the default one, which seems to work fine but the icon below the default one continues spinning for no reason.

I tried clearing cache but not able to remove this.

Any suggestions about how to get this remmoved?

  • 1
    It's a css issue.. Reduce the height of the text field or adjust autocomplete icons..
    – Anil Sagar
    Feb 26, 2014 at 5:11
  • Take a look at this issue queue to get an idea how to adjust css in your css file drupal.org/node/835694
    – Anil Sagar
    Feb 26, 2014 at 5:13
  • is it the same issue in my site, I am on Drupal 7 and I am using custom omega theme. Anyway thanks for your effort.
    – shrish
    Feb 26, 2014 at 5:21
  • possible duplicate of Change position of Drupal ajax progress throbber
    – Anil Sagar
    Feb 26, 2014 at 5:25
  • This is a CSS issue. The input field is too high; original throbber icon combines the default state and loading state on one image, meaning you will either have to edit that gif or use another one with separate images / greater space between them. May 23, 2015 at 7:47


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.