An AJAX HTTP request abnormally terminated in autocomplete textbox

Question

I have autocomplete textbox which populate the suggestion based on search text.

Steps

1. User type in search text box
2. User press enter instead of waiting for AJAX autocomplete to respond

It comes up with the following error.

An AJAX HTTP request terminated abnormally.
Debugging information follows.
Path: path/allcontent/autocomplete
StatusText: error
ResponseText: ReadyState: 4

I read Drupal alerts "An AJAX HTTP request terminated abnormally" during normal site operation, confusing site visitors/editors, but it didn't help.

This is the callback code.

Autocomplete Textbox

function search_user($form) {
        $form['text_usersearch'] = array(
            '#type' => 'textfield',
            '#title' => t(''),
            '#autocomplete_path' => 'searchuser/autocomplete',
            '#size' => 30,            
            '#attributes' => array('class'=> array('auto_submit'),'style'=> array('float:left')),
        );
        
$form['submit_user'] = array(
            '#type' => 'submit',
            '#value' => t('Find'),
            '#attributes' => array('class'=> array('submit_user linkbuttonAction'),'style'=> array('float:left;margin-left:10px')),
       
        );

Autocomplete menu register

$items['searchuser/autocomplete'] = array(
     'title' => 'Autocomplete for User',
     'page callback' => 'user_autocomplete_search',
     'access arguments' => array('access content'),  //or whatever permission makes sense
     'type' => MENU_CALLBACK
      );

Menu callback

function user_autocomplete_search($string) {
        global $user;
        $arrUserMatch = array();
        
        $matchCode = '%'.db_like($string).'%';
        $arrUserTitle = SelectMatchingUserTitle($matchCode,10);            
                  
        foreach ($arrUserTitle as $userId=>$userName)
        {                                         
            $autotext .= check_plain($userName);                       
            $arrUserMatch[$userName] = $autotext;
        }
      
        drupal_json_output($arrUserMatch);        
    }

Form submission handler

function search_user_submit($form, &$form_state) {
   
        $searchval= $form['text_usersearch']['#value'];        
        
        if($searchval=='')
            return;
        else
           drupal_goto('user/'.$searchval); 
}

JavaScript autocomplete

$(window).load(function(){
                Drupal.jsAC.prototype.select = function (node) {                        
                        this.input.value = $(node).data('autocompleteValue');                                               
                        
                        if(jQuery(this.input).hasClass('auto_submit')){
                              this.input.form.submit();                     
                        }};
                              
                
        });

Answer 1

i am using the following code to auto complete the name of the partners (store owners) in a search box in a form to edit a store's detail (not all form elements used are shown here): the auto_complete call back returns the list of all the partners in the database. (here one partner owns one store)
you could try and workout something similar:

the submit button links to a submit handler that updates the database.

function partner_store_form($form, &$form_state, $sid = 0) {
      $edit = NULL;  
      if ($sid != 0) {
      $query = db_select('store', 's')
        ->fields('s', array('partner_pid'));
      $query->leftJoin('partner', 'p', 's.partner_pid = p.pid');
      $query->condition('s.sid', $sid);
      $query->addField('p', 'name', 'p_name');
      $edit = $query->execute()->fetchObject();
      }
      $form['pid'] = array(
        '#type' => 'textfield',
        '#title' => t('Partner Name'),
        '#size' => 30,
        '#required' => TRUE,
        '#default_value' => isset($edit) ? $edit->p_name . "  [Id:" . $edit->partner_pid . "]" : '',
        '#maxlength' => 96,
        '#autocomplete_path' => 'partner/autocomplete'
      );

      $form['submit'] = array(
        '#type' => 'submit',
        '#value' => isset($edit) ? t('Edit') : t('Save'),
        '#submit' => array('partner_store_form_submit')
      );
    }

    ----------

    $items['partner/autocomplete'] = array(
        'title' => 'store autocomplete',
        'page callback' => 'partner_store_autocomplete',
        'access arguments' => array(CONST_PERM_LIST_PARTNER),
        'type' => MENU_CALLBACK,
      );

    -----------------

    function partner_store_autocomplete($string) {
      $store = array();
      $query = db_select('partner', 'p');
      $return = $query->fields('p', array('pid', 'name'))
        ->condition('p.name', '%' . db_like($string) . '%', 'LIKE')
        ->condition('p.remove', 0)
        ->execute();
      foreach ($return as $field) {
        $store[$field->name . "  [Id:" . $field->pid . "]"] = check_plain($field->name);
      }
      if (empty($store)) {
        $store[''] = t('No Such User');
      }
      drupal_json_output($store);
    }

Answer 2

This could be caused by an open problem to correct in Drupal core (Drupal alerts "An AJAX HTTP request terminated abnormally" during normal site operation, confusing site visitors/editors). Certain developers claim that it is not a bug but a UX problem. Either way, you can apply the recommended patch until the core team backport a fix when ready for Drupal 8 (autocomplete-1232416-218-7.37.patch):

diff --git a/misc/ajax.js b/misc/ajax.js
index 01b894d..34831e8 100644
--- a/misc/ajax.js
+++ b/misc/ajax.js
@@ -448,7 +448,10 @@
  * Handler for the form redirection error.
  */
 Drupal.ajax.prototype.error = function (response, uri) {
-  alert(Drupal.ajaxError(response, uri));
+  if(response.status != 0) {
+    alert(Drupal.ajaxError(response, uri));
+  }
+  
   // Remove the progress element.
   if (this.progress.element) {
     $(this.progress.element).remove();
diff --git a/misc/autocomplete.js b/misc/autocomplete.js
index 5679081..ee4e336 100644
--- a/misc/autocomplete.js
+++ b/misc/autocomplete.js
@@ -307,7 +307,9 @@
         }
       },
       error: function (xmlhttp) {
-        alert(Drupal.ajaxError(xmlhttp, db.uri));
+        if (xmlhttp.status != 0) {
+          alert(Drupal.ajaxError(xmlhttp, db.uri));
+        }
       }
     });
   }, this.delay);

However, to avoid patching core each time Drupal needs updating, another solution, depending on how important keeping abnormal AJAX request termination error reporting alerts is for you, could be what I and a few others did by injecting a redefined Drupal behavio(u)rs AJAX error handling function as so(ish) in forms, etc. that suffer from unnecessary AJAX termination alerts:

(function($){
  Drupal.behaviors.YourThemeNameOrWhatever = (function(){
    return {
      attach:function(context, settings){    
        $.ajaxSetup({
          beforeSend: function(jqXHR, settings) {
            settings.error = function(jqXHR, textStatus, errorThrown) { 
                if (window.console && console.log)
                {
                  console.log(textStatus);
                }
            };
          }
        });
      }
    }
  })();
})(jQuery);