I am setting the value of an autocomplete field from a jquery event:


That works, but the associated drupal autocomplete search does not fire.

My use case is I have a working autocomplete, but as well as typing a few letter into the field, I want to give users the option of clicking a link to populate the field.

My automcomplete field AJAX handler runs several commands as part of its response, so I'm just wanting to fool the form into thinking the user has entered the value.


Looking in misc/autocomplete.js, there's a function called populatePopup() (Drupal.jsAC.prototype.populatePopup). Since that function is bundled into the jSAC object, we can't call it directly. Instead, let's simulate the event that calls it which is found in the onkeyup() function.

 *  Fill an input field and then display the autocomplete popup.
 *  @param $field
 *    This is a jQuery field reference -- e.g. $('#my-input-field')
 *  @param searchVal
 *    The text to place into the input field
function ShowAutoComplete($field, searchVal) {
  var e = $.Event('keyup'); // Create an event to trigger
  e.which = 32; // Add the keyCode (32 is a space, but it shouldn't matter)

  // Set the field value, focus on the field, then trigger the event

FYI, I used this post as a reference to figure out how to fire the keyup event.

  • arrg - good on you!! I'll give you the tick, but I just spent 2 hours on this and got an alternative working – ErichBSchulz Nov 6 '13 at 12:19
  • ok have tested this - unfortunately it too suffers from needing a timing gap to allow drupal to catchup... it works about 70% of the time on the first click – ErichBSchulz Nov 8 '13 at 9:46

I was figuring this alternative out while hargobind was working on his alternative solution (thanks for you efforts hargobind!).

It seems necessary to add in a delay, of around 300-1000ms in order to trigger the correct events.

My final code is this, which recursively polls the input until Drupal removes the "disabled" class:

        var $f = $('input#edit-contact-id');
        var new_value = contact_name; 

        blur = function() {
            if ($f.hasClass('progress-disabled')) {setTimeout(blur, 50);}
            else {$f.trigger('blur');}
  • Why the delayed blur? Does .focus().blur() work? Also, since you are essentially binding the autocomplete to clicking on an anchor, you probably want to cancel the click event by calling e.preventDefault() – hargobind Nov 6 '13 at 12:57
  • I was getting inconsistent firing without the delay. Yes sorry omitted the "return false" – ErichBSchulz Nov 6 '13 at 13:02
  • @hargobind - have tidied up my version - will try yours later to see if it avoids the need for a delay – ErichBSchulz Nov 8 '13 at 6:23
  • My version works directly with the triggers in the autocomplete code in Drupal, so there should be no need for delays or other hackery. But let me know if you find errors. – hargobind Nov 8 '13 at 7:25
  • heh heh - i just tried to push my luck with this: $f.val(new_value).trigger('select').removeClass('progress-disabled').trigger('blur'); no joy. sigh. spent way to long on this :-) – ErichBSchulz Nov 8 '13 at 9:59

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.