Add #ajax callback to an entity_autocomplete field

Question

I have an entity_autocomplete field in a form.

$element['content'] = array(
  '#type' => 'entity_autocomplete',
  '#target_type' => 'node',
  '#title' => t('Content'),
  '#title_display' => 'hidden',
  '#default_value' => $content_default,
  '#selection_handler' => 'default', 
  '#selection_settings' => array(
    'target_bundles' => $selected_bundles,
  ),
  '#prefix' => '<div class="container-inline">'
);

I would like to add an #ajax callback to run after someone has selected a piece of content from the autocomplete drop-down, but I can't seem to find out how to attach it.

I have tried as follows which works for select boxes.

   $element['content']['#ajax'] = array(
      'callback' => 'Drupal\MODULE\Plugin\Field\FieldWidget\WIDGET::METHOD',
      'wrapper' => $id,
      'method' => 'replace',
      'progress' => array(
        'type' => 'throbber',
        'message' => "shuffling",
      ),
    );

However, it does not fire. Is it possible to do what i need?

It actually fires if you tab out of the field, but I need it to fire after a selection is made.

Answer 1

Drupal 8 (and Drupal 7) provides jQuery autocomplete event generation without any custom code.

Drupal 8 uses the jQuery UI autocomplete widget. The autocompleteclose event is the jQuery UI event most similar to the D7 autocompleteSelect event. In D8 the jQuery UI autocompleteselect event will also be also triggered but an Ajax callback on it will not receive updated form state values. autocompleteclose callbacks are provided with updated form state values, which is usually what you want.

(In Drupal 7, the autocompleteSelect event was added in Drupal issue #365241.)

In your case, you would assign this as follows:

$element['content']['#ajax']['event'] = 'autocompleteclose';

Answer 2

You can adjust the behavior with

'#ajax' => array(
  'event' => 'change',

This can be any javascript event. The default for a select is on 'change', for a normal field this is on 'blur'. But you can try any other event.

Reference: https://developer.mozilla.org/en-US/docs/Web/Events

Answer 3

As 4k4 mentioned the event can be changed via the #ajax property however there is no event in Drupal that signifies that an autocomplete has just had a selection so the event needs to be added. Taken from What's the event triggered after an autocomplete has run and how to retrieve the value selected

Add the event trigger

jQuery(event.target).trigger('autocomplete-select');

as follows

Drupal.autocomplete.options.select =  function selectHandler(event, ui) {
    var terms = Drupal.autocomplete.splitValues(event.target.value);
    // Remove the current input.
    terms.pop();
    // Add the selected item.
    if (ui.item.value.search(',') > 0) {
        terms.push('"' + ui.item.value + '"');
    }
    else {
        terms.push(ui.item.value);
    }
    event.target.value = terms.join(', ');
    jQuery(event.target).trigger('autocomplete-select');
    // Return false to tell jQuery UI that we've filled in the value already.
    return false;
}

Then the #ajax property can be set to listen to this event.

'#ajax' => array(
  'event' => 'autocomplete-select',

Answer 4

I have a date field on an Event entity. I have a second entity (Request) form with an autocomplete entity reference field to those Events. When i select an event from the autocomplete; I want the Event's date to be used as the default value in the date field on the Request form.

at the top of my custom module:

use Drupal\node\Entity\Node;
use Drupal\Core\Ajax\AjaxResponse;
use Drupal\Core\Ajax\InvokeCommand;

in my form_alter I have this:

$form['field_my_autocomplete_entityref']['widget'][0]['target_id']['#ajax'] = [
   'callback' => '_mymodule_autofill_date',
   'event' => 'autocompleteclose',
 ];

I then add the callback function in my custom module:

function _mymodule_autofill_date($form, $form_state) {
  $eid = $form_state->getValue('field_my_autocomplete_entityref')[0]['target_id'];
  $event = Node::load($eid);

  // set Request date fields as same value set in Event
  $start = $event->field_event_date->value;
  $end = $event->field_event_date->end_value;

  $response = new AjaxResponse();
  $response->addCommand(new InvokeCommand('#edit-field-event-date-0-value-date', 'val', [$start]));
  $response->addCommand(new InvokeCommand('#edit-field-event-date-0-end-value-date', 'val', [$end]));

  return $response;
}