자동 완성 실행 후 트리거 된 이벤트와 선택한 값을 검색하는 방법

자동 완성 위젯을 사용하는 용어 참조가있는 노드 추가 양식이 있습니다.

자동 완성 위젯을 사용하여 사용자가 채워진 용어의 "tid"를 원합니다.

현재로서는 이벤트가 트리거되지 않지만 (7.34 현재) 이 문제 에 다음과 같은 패치 를 사용할 수 있습니다.

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

});

또는 이전 버전의 jQuery를 사용하는 경우

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

});

node선택한 항목이 어디에 있습니까 ? tid해당 객체의 속성 중 하나 를 가져올 수 있어야 합니다.

Drupal 7 및 8은 현재 사용자 정의 코드없이 jQuery 자동 완성 이벤트 생성을 제공합니다.

Drupal 7에서 autocompleteSelect이벤트는 Drupal 이슈 # 365241 에 추가되었습니다 . (Clive는 자신의 답변을 게시 할 때 이것이 진행 중이라고 언급했습니다.)

Drupal 8은 jQuery UI 자동 완성 위젯을 사용합니다 . 이 autocompleteclose이벤트는 D7 autocompleteSelect이벤트 와 가장 유사한 jQuery UI 이벤트입니다. D8에서는 jQuery UI autocompleteselect이벤트도 트리거되지만 이에 대한 Ajax 콜백은 업데이트 된 양식 상태 값을 수신하지 않습니다. autocompleteclose콜백에는 업데이트 된 양식 상태 값이 제공되며 일반적으로 원하는 값입니다.

다른 답변에서 알 수 있듯이 이벤트 핸들러 의 jQuery 또는 Drupal.behaviors ( Drupal 7 , Drupal 8 )를 사용하여 클라이언트 브라우저에서 이벤트 데이터를 사용할 수 있습니다 . Drupal 7에서는 autocompleteSelect이벤트를 사용하고 Drupal 8에서는 사용합니다 autocompleteclose.

PHP 코드에 값이 필요한 경우 Ajax 콜백이 사용될 수 있습니다. 다음은 Drupal 7 또는 Drupal 8 에서이 작업을 수행하는 방법에 대한 지침입니다 .

Clive에서 언급 한 문제 와이 의견 덕분에 동작을 사용해야했습니다 ( 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, '');

      });
    }
  };

Drupal 8에서는 이것이 옮겨졌습니다. 다음 코드를 사용하여 기능을 재정의 할 수 있습니다.

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

의 코드를 재정의합니다 core/misc/autocomplete.js.

그런 다음 코드에서들을 수 있습니다

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