How do autocomplete text fields work?

Question

I am asking this question because I have an autocomplete text field with #autocomplete_path set to a valid working path but key events are not handled by the misc/autocomplete.js file. When the form is being created, it apparently assigns all the functions to the respective variables, but none of those functions are executed. For example following function in the misc/autocomplete.js isn't executed.

Drupal.jsAC = function ($input, db) {
  var ac = this;
  this.input = $input[0];
  this.ariaLive = $('#' + this.input.id + '-autocomplete-aria-live');
  this.db = db;

  $input
    .keydown(function (event) { return ac.onkeydown(this, event); })
    .keyup(function (event) { ac.onkeyup(this, event); })
    .blur(function () { ac.hidePopup(); ac.db.cancel(); });

};

Hence, when a user types a letter, key up or key down handlers aren't invoked and nothing happens. So to debug, I want to know how autocomplete works.

Could someone please explain how this works?

Answer 1

Working with Drupal autocomplete form is good, instead of using the jQuery autocomplete.

Here we have a solution that how to create a custom autocomplete form and to get the user names or whatever.

I am giving the simple example of using it.

Take a menu item in hook_menu to get the autocomplete form. This will call the function called test_autocomplete_form.

$items['autocomplete_form'] = array(
        'title' => 'Test autocomplete form',
        'page callback' => 'drupal_get_form',
        'page arguments' => array('test_autocomplete_form'),
        'access arguments' => array('access test autocomplete'),
        'type' => MENU_NORMAL_ITEM
);

// Which will get the autocomplete form
function test_autocomplete_form(){
    $form = array();
    $form['testauto'] = array(
        '#type' => 'textfield',
        '#autocomplete_path' => 'test/autocomplete',
        '#description' => t('Please type any letter.'),
    );
    return $form;
}

We have to mention our custom path in for the #autocomplete_path attribute. Here I have given a path like test/autocomplete which will have to get the autocomplete result for that need to have one more menu item with the same path which we have given for the #autocomplete_path:

// menu item to get the autocomplete result,Which will call the function called 'test_autocomplete'
$items['test/autocomplete'] = array(
        'title' => 'Test autocomplete',
        'page callback' => 'test_autocomplete',
        'access arguments' => array('access test autocomplete'),
        'type' => MENU_CALLBACK
);

// function to get the autocomplete result, I am taking the user table to get the users names in the autocomplete field
    function test_autocomplete($string = '') {
      $matches = array();
      if ($string) {
        $result = db_query_range("SELECT name FROM {users} WHERE LOWER(name) LIKE LOWER('%s%%')", $string, 0, 10); // only 10 results will show
        while ($user = db_fetch_object($result)) {
          $matches[$user->name] = check_plain($user->name);
        }
      }
      drupal_json_output($matches); // Returns the data in JSON format
    }