3

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.

4 Answers 4

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';
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

0

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',
7
  • This answer is not correct. See my answer to a similar question here drupal.stackexchange.com/a/228150/2272
    – keithm
    Feb 10, 2017 at 21:21
  • Are you saying that you can just set '#ajax' => array( 'event' => 'autocompleteSelect', If there is a better way can you add it as an answer instead of just saying this one is wrong?
    – Rob Holmes
    Feb 21, 2017 at 10:41
  • I posted a link in a comment rather than duplicate my answer from another question. As the link I posted states, in Drupal 8 the correct event is 'autocompleteclose'. The 'autocompleteselect' event is also triggered but has some problems. Did you read the link?
    – keithm
    Feb 21, 2017 at 12:53
  • So you are saying that '#ajax' => array( 'event' => 'autocompleteclose', Is the correct answer and works?
    – Rob Holmes
    Feb 21, 2017 at 15:51
  • Yes it works. You might also upvote my answer when you find it works for you.
    – keithm
    Feb 21, 2017 at 16:36
0

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

Your Answer

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

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