入力できるようにテキストフィールドでajax呼び出しを遅らせる

オートコンプリートが機能しているように見えるのと同じ方法で、ajaxの起動を遅らせたいと思います。たとえば、ユーザーが入力した場合、最後のキーアップから500ミリ秒が経過するまでajaxは実行されません。

私は現在drupal.behaviorsを見ていますが、それを機能させることができません。

Drupal.behaviors.mymodule = {
  attach: function(context, settings) { 
    $('input.andtimer', context).delay(500).ajaxStart();
  }
};

これは、ビヘイビアーがアタッチされるフォーム要素です。

$form['my_input'] = array(
  '#type' => 'textfield',
  '#default_value' => $value,
  '#ajax' => array(
    'callback' => 'my_callback',        
    'event' => 'keyup',
    'wrapper' => 'my_wrapper',  
    'trigger_as' => array(
      'name' =>  'my_button',
  ),
  'progress' => array('type' => 'none'),
  ),
  '#attributes' => array(
    'class' => array('andtimer'),
  ),                      
);

このjsfiddleは、私が達成しようとしていることを示しています。

Drupal.ajax.prototype.beforeSendをオーバーライドするにはどうすればよいですか？これを取り除くためのルートになりますか？

以下は、クラス.andtimerの入力の最初の「セット」に対して機能します。他のセットでは機能しません。ajaxは常に最初のセットから続行します。これを修正する方法はありますか？

(function($, Drupal) {
    Drupal.behaviors.bform = {
        attach : function(context, settings) {

            var events = $('.andtimer').clone(true).data('events'); $('.andtimer').unbind('keyup');
            var typingTimer;
            var doneTypingInterval = 300;
            $('.andtimer').keyup(function() { clearTimeout(typingTimer); typingTimer = setTimeout(doneTyping, doneTypingInterval); function doneTyping() { $.each(events.keyup, function() {
                        this.handler();
                    });
                }

                return false;
            });
        }
    };
})(jQuery, Drupal); 

提案されているように$ form ['my_input'] ['＃ajax'] ['event'] = 'finishedinput'を使用し、

var typingTimer;
var doneTypingInterval = 600;

$('.andtimer').on('keyup', function (e) {
  clearTimeout(typingTimer);
  if ($(this).val) { var trigid = $(this);
    typingTimer = setTimeout(function(){                    
      trigid.triggerHandler('finishedinput');
    }, doneTypingInterval);
  }
});

満たされた入力の数を取得する必要がある入力の「グループ」ごとに機能します。

1つのオプションは、カスタムjQueryイベントを使用することです。以下のようなものfinishedinput。$form['my_input']['#ajax']['event'] = 'finishedinput'適切な遅延の後にカスタムイベントをトリガーするためのJSを設定して提供します（フィドルのJSと同様）。

このアプローチには、このスクリプトが実行されるすべてのページで、キーアップによってトリガーされるすべてのAJAXイベントに適用されるという長所と短所の両方があります。

!function ($) {
  const originalMethod = Drupal.ajax.prototype.eventResponse,
        timeoutDelay   = 500;

  var timeoutId;

  // Override the default event handler
  Drupal.ajax.prototype.eventResponse = function (element, event) {
    const self = this;
    clearTimeout(timeoutId);

    if ('keyup' === this.event) {
      // Fire the original event handler with a delay
      timeoutId = setTimeout(function (element, event) {
        originalMethod.apply(self, [element, event]);
      }, timeoutDelay, element, event);
    }
    else {
      // Fire the original event handler immediately
      originalMethod.apply(this, [element, event]);
    }
  };
}(jQuery);

独自のJqueryイベントを実装し、トリガーを遅らせるロジックを追加できます

これをmy_module.jsに追加します

(function ($, Drupal, drupalSettings) { 'use strict'; Drupal.behaviors.my_module_finishedinput = { attach: function (context, settings) { var typingTimer; var delay = 1100; $('#form-input-id-goes-here').once('finished_input').on('keyup', function (e) {
        clearTimeout(typingTimer);
        if ($(this).val) { var trigid = $(this);
          typingTimer = setTimeout(function () {
            trigid.triggerHandler('finishedinput');
          }, delay);
        }
      });
    }
  };
})(jQuery, Drupal, drupalSettings);

my_module.libraries.ymlを作成して、ページにjsを追加します

jquery_event:
  version: VERSION
  js:
    my_module.js: {}
  dependencies:
    - core/jquery
    - core/jquery.once
    - core/drupal
    - core/drupalSettings

フォームにjsを添付します

$form['myform']['#attached'] = ['library' => ['my_module/jquery_event']];

最後に、この配列を$ formに追加します

'#ajax' => [
        'callback' => '::myFormCallback',
        'event' => 'finishedinput',