web-dev-qa-db-ja.com

オートコンプリートの実行後にトリガーされるイベントとは何ですか。また、選択した値を取得する方法

オートコンプリートウィジェットを使用する用語参照を持つノード追加フォームがあります。

オートコンプリートウィジェットを使用して、ユーザーが入力した用語の「tid」が欲しい。

javascriptajax
8
sel_space

現時点ではイベントはトリガーされません（7.34現在）が、 この問題 にパッチがあり、次のようなものを使用できます。

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

});

またはjQueryの古いバージョンで使用している場合

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

});

ここで、nodeは選択されたアイテムです。そのオブジェクトのプロパティの1つからtidを取得できるはずです。

13
Clive

Drupal 7および8は、現時点ではカスタムコードなしでjQueryオートコンプリートイベントを生成します。

Drupal 7で、autocompleteSelectイベントがDrupal問題 ＃365241 に追加されました。 （クライヴはこれが進行中であると述べ、彼の返事を投稿した。）

Drupal 8はjQuery UI autocomplete widget を使用します。 autocompletecloseイベントは、D7 autocompleteSelectイベントに最も類似したjQuery UIイベントです。 D8では、jQuery UI autocompleteselectイベントもトリガーされますが、そのイベントのAjaxコールバックは更新されたフォームの状態値を受け取りません。 autocompletecloseコールバックには、更新されたフォームの状態値が提供されます。これは通常、必要な値です。

他の回答が示しているように、 jQuery on イベントハンドラーまたはDrupal.behaviors（ を使用して、クライアントブラウザーでイベントデータを利用できます。 Drupal 7 、 Drupal 8 ）。 Drupal 7では、autocompleteSelectイベントを使用し、Drupal 8 autocompleteclose。

PHPコードの値が必要な場合は、Ajaxコールバックを使用できます。これを Drupal 7 または Drupal 8 で。

3
keithm

私はそれを動作させるために動作を使用する必要がありました（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, '');

      });
    }
  };
1
tyler.frankenstein

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