Merge pull request #2504 from Laravel-Backpack/select2-ajax-delay

[4.0][Feature] Allow delay on AJAX calls for select2_from_ajax fields

Author: tabacitu

src/resources/views/crud/fields/select2_from_ajax.blade.php

@@ -3,6 +3,10 @@
     $connected_entity = new $field['model'];
     $connected_entity_key_name = $connected_entity->getKeyName();
     $old_value = old(square_brackets_to_dots($field['name'])) ?? $field['value'] ?? $field['default'] ?? false;
+
+    // by default set ajax query delay to 500ms
+    // this is the time we wait before send the query to the search endpoint, after the user as stopped typing.
+    $field['delay'] = $field['delay'] ?? 500;
 @endphp
 
 <div @include('crud::inc.field_wrapper_attributes') >
@@ -22,6 +26,7 @@
         data-field-attribute="{{ $field['attribute'] }}"
         data-connected-entity-key-name="{{ $connected_entity_key_name }}"
         data-include-all-form-fields="{{ $field['include_all_form_fields'] ?? 'true' }}"
+        data-ajax-delay="{{ $field['delay'] }}"
         @include('crud::inc.field_attributes', ['default_class' =>  'form-control'])
         >
 
@@ -99,6 +104,7 @@ function bpFieldInitSelect2FromAjaxElement(element) {
         var $includeAllFormFields = element.attr('data-include-all-form-fields')=='false' ? false : true;
         var $allowClear = element.attr('data-column-nullable') == 'true' ? true : false;
         var $dependencies = JSON.parse(element.attr('data-dependencies'));
+        var $ajaxDelay = element.attr('data-ajax-delay');
 
         if (!$(element).hasClass("select2-hidden-accessible"))
         {
@@ -112,7 +118,7 @@ function bpFieldInitSelect2FromAjaxElement(element) {
                     url: $dataSource,
                     type: $method,
                     dataType: 'json',
-                    quietMillis: 250,
+                    delay: $ajaxDelay,
                     data: function (params) {
                         if ($includeAllFormFields) {
                             return {

src/resources/views/crud/fields/select2_from_ajax_multiple.blade.php

@@ -3,6 +3,10 @@
     $connected_entity = new $field['model'];
     $connected_entity_key_name = $connected_entity->getKeyName();
     $old_value = old(square_brackets_to_dots($field['name'])) ?? $field['value'] ?? $field['default'] ?? false;
+
+    // by default set ajax query delay to 500ms
+    // this is the time we wait before send the query to the search endpoint, after the user as stopped typing.
+    $field['delay'] = $field['delay'] ?? 500;
 @endphp
 
 <div @include('crud::inc.field_wrapper_attributes') >
@@ -21,6 +25,7 @@
         data-field-attribute="{{ $field['attribute'] }}"
         data-connected-entity-key-name="{{ $connected_entity_key_name }}"
         data-include-all-form-fields="{{ $field['include_all_form_fields'] ?? 'true' }}"
+        data-ajax-delay="{{ $field['delay'] }}"
         @include('crud::inc.field_attributes', ['default_class' =>  'form-control'])
         multiple>
 
@@ -85,6 +90,7 @@ function bpFieldInitSelect2FromAjaxMultipleElement(element) {
         var $includeAllFormFields = element.attr('data-include-all-form-fields')=='false' ? false : true;
         var $allowClear = element.attr('data-column-nullable') == 'true' ? true : false;
         var $dependencies = JSON.parse(element.attr('data-dependencies'));
+        var $ajaxDelay = element.attr('data-ajax-delay');
 
         if (!$(element).hasClass("select2-hidden-accessible"))
         {
@@ -97,7 +103,7 @@ function bpFieldInitSelect2FromAjaxMultipleElement(element) {
                     url: $dataSource,
                     type: $method,
                     dataType: 'json',
-                    quietMillis: 250,
+                    delay: $ajaxDelay,
                     data: function (params) {
                         if ($includeAllFormFields) {
                             return {