Jquery and Drupal Autocomplete

Question

I have an autocomplete field in a custom form which works and returns a pipe-seperated value which I want to then split up and insert into the appropriate form fields. For example, the autocomplete field returns 'Last|First|ID' such as 'Smith|John|123456789' and I want to assign these values to other form fields and replace the current value of the auto complete field with the last name.

I have successfully gotten the ID and the First Name to be populated using jquery, but the last name in the auto complete field WILL NOT CHANGE.

Some observations: if I first alert the value of the field, it changes. It's as if the script is running too fast and skips over the step to set the value of the autocomplete field. It also appears to work with other event firings instead of .change, such as .blur, or .keyup - but the thing is I need it to be .change or else it won't work for all cases.

Here's my jquery code:

$('#edit-emp-lname').change( function () {
    var empName = $(this).val();
    //alert($(this).val());
    var empArray = empName.split("|");

 //The following line is basically ignored. All other following lines work successfully.
    $(this).val(empArray[0]);
    $('input[name="emp_fname"]').val(empArray[1]);
    $('input[name="emp_uid"]').val(empArray[2]);
});

Update In order to make this work properly and in IE to boot I had to do some extra code, shown below:

$('#edit-emp-lname').change(function() { doChange(); }).attr("onchange", function() { doChange(); }).blur( function() { doChange(); });
function doChange() {
    var empName = $('#edit-emp-lname').val();
    var empArray = empName.split("|");
    setTimeout( function () {
        $('#edit-emp-lname').val(empArray[0]);
        }, 10);
    $('#edit-emp-fname').val(empArray[1]);
    $('#edit-emp-uid').val(empArray[2]);
}

Answer 1

If I want to display in autocomplete all this field I will use hook_form_alter I will change the value of autocomplete with another function so this is what i will do

function hook_form_alter() {
  $form['field_selectedarticles']['und'][0]['nid']['#autocomplete_path'] = 'autocomplete/filteration';
}

function autocomplete_filteration($string) {
  //select * fields I want
  print drupal_json_output($items);
}

Answer 2

Make the following changes in the file at /misc/autocomplete.js

change:

Drupal.jsAC.prototype.select = function (node) {
  this.input.value = $(node).data('autocompleteValue');
};

to:

Drupal.jsAC.prototype.select = function (node) {
  this.input.value = $(node).data('autocompleteValue');
  $(this.input).trigger('change');
};

this will allow the change trigger to work when the choice in the autocomplete list is clicked.

In order for the change to trigger when it is selected with arrow keys and pressing enter, you need to add the trigger in the hidePopup function changing:

Drupal.jsAC.prototype.hidePopup = function (keycode) {
  // Select item if the right key or mousebutton was pressed.
  if (this.selected && ((keycode && keycode != 46 && keycode != 8 && keycode != 27) || !keycode)) {
    this.input.value = $(this.selected).data('autocompleteValue');
  }
  // Hide popup.
  var popup = this.popup;
  if (popup) {
    this.popup = null;
    $(popup).fadeOut('fast', function () { $(popup).remove(); });
  }
  this.selected = false;
  $(this.ariaLive).empty();

};

to:

Drupal.jsAC.prototype.hidePopup = function (keycode) {
  // Select item if the right key or mousebutton was pressed.
  if (this.selected && ((keycode && keycode != 46 && keycode != 8 && keycode != 27) || !keycode)) {
    this.input.value = $(this.selected).data('autocompleteValue');
    $(this.input).trigger('change');
  }
  // Hide popup.
  var popup = this.popup;
  if (popup) {
    this.popup = null;
    $(popup).fadeOut('fast', function () { $(popup).remove(); });
  }
  this.selected = false;
  $(this.ariaLive).empty();

};

Once you make these changes to the autocomplete.js file, you should be able to call the .change trigger like normal.

Answer 3

In order to make this work properly as well as in IE, I had to trigger a function onChange rather than calling it in the closure directly.

$('#edit-emp-lname').change(function() { doChange(); }).attr("onchange", function() { doChange(); }).blur( function() { doChange(); });
function doChange() {
    var empName = $('#edit-emp-lname').val();
    var empArray = empName.split("|");
    setTimeout( function () {
        $('#edit-emp-lname').val(empArray[0]);
        }, 10);
    $('#edit-emp-fname').val(empArray[1]);
    $('#edit-emp-uid').val(empArray[2]);
}