5

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]);
}
  • You can see how openlayers_geocoder does it. It seems simple and uses the #autocomplete_path property of Forms API. – Capi Etheriel Aug 23 '11 at 14:19
  • Thanks for your response but that's not what I'm asking. I have my field working using #autocomplete_path to retrieve the data. That's working flawlessly. What is going wrong is that once that data is populated, the change event either DOESN'T fire, or doesn't fire reliably so that all the steps in the script are completed. Its totally random. – oranges13 Aug 26 '11 at 13:01
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);
}
0

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.

0

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]);
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.