Sự kiện được kích hoạt sau khi tự động hoàn tất chạy và cách truy xuất giá trị đã chọn

Tôi có một hình thức thêm nút với một tham chiếu thuật ngữ sử dụng tiện ích tự động hoàn thành.

Tôi muốn "tid" của thuật ngữ được điền bởi người dùng bằng cách sử dụng tiện ích tự động hoàn thành.

Không có sự kiện nào được kích hoạt tại thời điểm này (kể từ 7.34), nhưng có một bản vá về vấn đề này sẽ cho phép bạn sử dụng một cái gì đó như:

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

});

hoặc nếu bạn đang sử dụng trên phiên bản cũ của jQuery

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

});

Đâu nodelà mục được chọn. Bạn sẽ có thể lấy tidtừ một trong các thuộc tính trên đối tượng đó.

Drupal 7 và 8 cung cấp việc tạo sự kiện tự động hoàn thành jQuery mà không cần bất kỳ mã tùy chỉnh nào tại thời điểm này.

Trong Drupal 7, autocompleteSelectsự kiện đã được thêm vào trong vấn đề Drupal # 365241 . (Clive đã đề cập đến vấn đề này khi anh ấy đăng phản hồi của mình.)

Drupal 8 sử dụng tiện ích tự động hoàn thành giao diện người dùng jQuery . Sự autocompleteclosekiện này là sự kiện UI UI tương tự như autocompleteSelectsự kiện D7 . Trong D8, autocompleteselectsự kiện UI UI cũng sẽ được kích hoạt nhưng một cuộc gọi lại Ajax trên nó sẽ không nhận được các giá trị trạng thái biểu mẫu được cập nhật. autocompleteclosecuộc gọi lại được cung cấp với các giá trị trạng thái biểu mẫu cập nhật, thường là những gì bạn muốn.

Như các câu trả lời khác đã chỉ ra, bạn có thể sử dụng dữ liệu sự kiện trong trình duyệt máy khách bằng cách sử dụng jQuery trên trình xử lý sự kiện hoặc Drupal.behaviors ( Drupal 7 , Drupal 8 ). Trong Drupal 7, bạn sẽ sử dụng autocompleteSelectsự kiện này và trên Drupal 8 autocompleteclose.

Nếu bạn cần giá trị trong mã PHP của mình, một cuộc gọi lại Ajax có thể được sử dụng. Dưới đây là một số hướng dẫn về cách thực hiện việc này trong Drupal 7 hoặc trong Drupal 8 .

Tôi cần sử dụng một hành vi để khiến nó hoạt động (nhờ vào vấn đề được Clive đề cập và nhận xét này: 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, '');

      });
    }
  };

Trong Drupal 8 điều này đã di chuyển. Bạn có thể ghi đè chức năng với mã sau đây.

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

Ghi đè mã trong core/misc/autocomplete.js.

Sau đó, trong mã của bạn, bạn có thể nghe

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