9

I have a node add form with a term reference that uses autocomplete widget.

I want the "tid" of the filled term by the user using the autocomplete widget.

13

No event is triggered at the moment (as of 7.34), but there's a patch on this issue that should let you use something like:

$('#input-id').on('autocompleteSelect', function(event, node) {

});

or if you're using on old version of jQuery

$('#input-id').bind('autocompleteSelect', function(event, node) {

});

Where node is the selected item. You should be able to get the tid from one of the properties on that object.

2
4

Drupal 7 and 8 provide jQuery autocomplete event generation without any custom code at this time.

In Drupal 7, the autocompleteSelect event was added in Drupal issue #365241. (Clive mentioned this was in progress when he posted his response.)

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.

As the other answers have indicated, you may make use of the event data in the client browser using a jQuery on event handler, or Drupal.behaviors (Drupal 7, Drupal 8). In Drupal 7 you would use the autocompleteSelect event, and on Drupal 8 autocompleteclose.

If you need the value in your PHP code, an Ajax callback may be used. Here are some directions for how to do this in Drupal 7 or in Drupal 8.

1

I needed to use a behavior to get it to work (thanks to the issue mentioned by Clive, and this comment: https://www.drupal.org/node/365241#comment-9575707):

Drupal.behaviors.autocompleteSupervisor = {
    attach: function (context) {
      $('#edit-field-foo-und-0-target-id', context).bind('autocompleteSelect', function(event, node) {

        // Do custom stuff here...
        var entity_id = $(this).val().replace($(node).text().trim(), '').replace(/\(|\)| /g, '');

      });
    }
  };
0

In Drupal 8 this has moved. You can override the functionality with the following code.

/**
 * Handles an autocompleteselect event.
 *
 * Override the autocomplete method to add a custom event.
 *
 * @param {jQuery.Event} event
 *   The event triggered.
 * @param {object} ui
 *   The jQuery UI settings object.
 *
 * @return {bool}
 *   Returns false to indicate the event status.
 */
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(', ');
  // Fire custom event that other controllers can listen to.
  jQuery(event.target).trigger('autocomplete-select');
  // Return false to tell jQuery UI that we've filled in the value already.
  return false;
}

Overrides the code in core/misc/autocomplete.js.

Then in your code you can listen to

var field = jQuery('<field-selector>');

var lastField = ''
field.on('autocomplete-select', function() {
    console.log("autocompleteSelect");
    // Check that field actually changed.
    if ($(this).val() != lastValue) {
      lastValue = $(this).val();
      console.log('The text box really changed this time');
    }
  })
2
  • Using an override of this form is not a best practice. If two such overrides are put in a site with slightly different event names, e.g., 'autocomplete-select' and 'autocompleteSelect', the last assigned one will take precedence and the the first event will never get triggered. Besides, Drupal 7 and 8 both trigger appropriate events without any additional code. See my answer drupal.stackexchange.com/a/228150/2272.
    – keithm
    Mar 6 '17 at 22:17
  • Drupal.autocomplete.options.select = function selectHandler(event, ui) { Does fail, when no autocomplete field is available on the specific page. You must implement a check, to ensure that the auto-complete field exists. Otherwise you will brake your JS. You will get such errors then: > Uncaught TypeError: Cannot read property 'options' of undefined at node-form.js:94 at node-form.js:113
    – jepster
    Nov 11 '17 at 14:30
0

Drupal 8 uses the jQuery UI autocomplete widget which means you can use one of those events: https://api.jqueryui.com/autocomplete/

$(context).find('#my-autocomplete-input-element').on('autocompleteselect', function (event, data) { 
  // Do something with "data" ...  
});

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.