0

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

$('input#edit-myfield').val(mynewvaluethatIwant)

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.

2 Answers 2

1

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.

<script>
/**
 *  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
  $field.val(searchVal).focus().trigger(e);
}
</script>

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

2
  • arrg - good on you!! I'll give you the tick, but I just spent 2 hours on this and got an alternative working Nov 6, 2013 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 Nov 8, 2013 at 9:46
0

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; 

        $f.val(new_value).trigger('select');
        blur = function() {
            if ($f.hasClass('progress-disabled')) {setTimeout(blur, 50);}
            else {$f.trigger('blur');}
        };
        blur();
5
  • 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, 2013 at 12:57
  • I was getting inconsistent firing without the delay. Yes sorry omitted the "return false" Nov 6, 2013 at 13:02
  • @hargobind - have tidied up my version - will try yours later to see if it avoids the need for a delay Nov 8, 2013 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, 2013 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 :-) Nov 8, 2013 at 9:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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