jQuery DataTables: Retrasar la búsqueda hasta que se hayan escrito 3 caracteres O se haya hecho clic en un botón

¿Existe una opción para iniciar la búsqueda solo después de que se hayan escrito 3 caracteres?

He escrito un script PHP para colegas que muestra 20.000 entradas y se quejan de que al escribir una palabra, las primeras letras hacen que todo se congele.

Una alternativa sería que la búsqueda se inicie haciendo clic en un botón y no escribiendo un carácter.

A continuación se muestra mi código actual:

$("#my_table").dataTable( {
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "bAutoWidth": false,
        "aoColumns": [
                /* qdatetime */   { "bSearchable": false },
                /* id */          null,
                /* name */        null,
                /* category */    null,
                /* appsversion */ null,
                /* osversion */   null,
                /* details */     { "bVisible": false },
                /* devinfo */     { "bVisible": false, "bSortable": false }
        ],
        "oLanguage": {
                "sProcessing":   "Wait please...",
                "sZeroRecords":  "No ids found.",
                "sInfo":         "Ids from _START_ to _END_ of _TOTAL_ total",
                "sInfoEmpty":    "Ids from 0 to 0 of 0 total",
                "sInfoFiltered": "(filtered from _MAX_ total)",
                "sInfoPostFix":  "",
                "sSearch":       "Search:",
                "sUrl":          "",
                "oPaginate": {
                        "sFirst":    "<<",
                        "sLast":     ">>",
                        "sNext":     ">",
                        "sPrevious": "<"
                },
                "sLengthMenu": 'Display <select>' +
                        '<option value="10">10</option>' +
                        '<option value="20">20</option>' +
                        '<option value="50">50</option>' +
                        '<option value="100">100</option>' +
                        '<option value="-1">all</option>' +
                        '</select> ids'
        }
} );

Solución para la versión 1.10 -

Después de buscar aquí una respuesta completa y no encontrar una, escribí esto (utilizando el código de la documentación y algunas respuestas aquí).

El siguiente código funciona para retrasar la búsqueda hasta que se ingresen al menos 3 caracteres:

// Call datatables, and return the API to the variable for use in our code
// Binds datatables to all elements with a class of datatable
var dtable = $(".datatable").dataTable().api();

// Grab the datatables input box and alter how it is bound to events
$(".dataTables_filter input")
    .unbind() // Unbind previous default bindings
    .bind("input", function(e) { // Bind our desired behavior
        // If the length is 3 or more characters, or the user pressed ENTER, search
        if(this.value.length >= 3 || e.keyCode == 13) {
            // Call the API search function
            dtable.search(this.value).draw();
        }
        // Ensure we clear the search if they backspace far enough
        if(this.value == "") {
            dtable.search("").draw();
        }
        return;
    });

Nota: Esto fue para una versión mucho anterior de las tablas de datos, consulte esta respuesta para las tablas de datos jQuery v1.10 y posteriores.

Esto modificará el comportamiento del cuadro de entrada para filtrar solo cuando se haya presionado return o cuando haya al menos 3 caracteres en la búsqueda:

$(function(){
  var myTable=$('#myTable').dataTable();

  $('.dataTables_filter input')
    .unbind('keypress keyup')
    .bind('keypress keyup', function(e){
      if ($(this).val().length < 3 && e.keyCode != 13) return;
      myTable.fnFilter($(this).val());
    });
});

Puedes verlo funcionando aquí: http://jsbin.com/umuvu4/2 . No sé por qué la gente de las tablas de datos se vincula tanto a la pulsación de teclas como a la activación de teclas, pero estoy anulando ambas para que sigan siendo compatibles, aunque creo que la activación de teclas es suficiente.

¡Espero que esto ayude!

¿Por qué no probar esta versión extendida de la respuesta de Stony :)

var searchWait = 0;
var searchWaitInterval;
$('.dataTables_filter input')
.unbind('keypress keyup')
.bind('keypress keyup', function(e){
    var item = $(this);
    searchWait = 0;
    if(!searchWaitInterval) searchWaitInterval = setInterval(function(){
        if(searchWait>=3){
            clearInterval(searchWaitInterval);
            searchWaitInterval = '';
            searchTerm = $(item).val();
            oTable.fnFilter(searchTerm);
            searchWait = 0;
        }
        searchWait++;
    },200);

});

Esto retrasará la búsqueda hasta que el usuario deje de escribir.

Espero eso ayude.

A continuación se explica cómo manejarlo con el cambio de api en la versión 1.10

var searchbox = $('#promogrid_filter input');
var pgrid = $('#promogrid').DataTable();

//Remove default datatable logic tied to these events
searchbox.unbind();

searchbox.bind('input', function (e) {
   if(this.value.length >= 3) {
      pgrid.search(this.value).draw();
   }
   if(this.value == '') {
      pgrid.search('').draw();
   }
   return;
});

Mi versión de tablas de datos 1.10.10

Cambié algunas cosas y ahora funciona. Entonces, lo estoy compartiendo, porque fue difícil hacerlo funcionar para la versión 1.10.10. Gracias a cale_b, Stony y Sam Barnes. Mira el código para ver lo que hice.

    var searchWait = 0;
    var searchWaitInterval;
    $('.dataTables_filter input')
    .unbind() // leave empty here
    .bind('input', function(e){ //leave input
        var item = $(this);
        searchWait = 0;
        if(!searchWaitInterval) searchWaitInterval = setInterval(function(){
            if(searchWait >= 3){
                clearInterval(searchWaitInterval);
                searchWaitInterval = '';
                searchTerm = $(item).val();
                oTable.search(searchTerm).draw(); // change to new api
                searchWait = 0;
            }
            searchWait++;
        },200);

    });

Aquí hay un script similar a un complemento que amplía las tablas de datos.

jQuery.fn.dataTableExt.oApi.fnSetFilteringEnterPress = function ( oSettings ) {
    var _that = this;

    this.each( function ( i ) {
        $.fn.dataTableExt.iApiIndex = i;
        var
            $this = this, 
            oTimerId = null, 
            sPreviousSearch = null,
            anControl = $( 'input', _that.fnSettings().aanFeatures.f );

            anControl
              .unbind( 'keyup' )
              .bind( 'keyup', function(e) {

              if ( anControl.val().length > 2 && e.keyCode == 13){
                _that.fnFilter( anControl.val() );
              }
        });

        return this;
    } );
    return this;
}

uso:

$('#table').dataTable().fnSetFilteringEnterPress();

Para hacer es invocar la llamada al servidor después de que el usuario haya escrito los caracteres mínimos en el cuadro de búsqueda, puede seguir la sugerencia de Allan :

Personalice la función API del complemento fnSetFilteringDelay () para agregar una condición adicional en la longitud de la cadena antes de configurar el filtro, considerando también una entrada de cadena en blanco para borrar el filtro

Entonces, para un mínimo de 3 caracteres, simplemente cambie la línea # 19 en el complemento a:

if ((anControl.val().length == 0 || anControl.val().length >= 3) && (sPreviousSearch === null || sPreviousSearch != anControl.val())) {

Esto funciona en DataTables 1.10.4:

var table = $('#example').DataTable();

$(".dataTables_filter input")
    .unbind()
    .bind('keyup change', function(e) {
        if (e.keyCode == 13 || this.value == "") {
            table
                .search(this.value)
                .draw();
        }
    });

JSFiddle

para la versión 1.10 agregue este código a su javascript en las opciones. InitComplete anula el método de búsqueda y espera a que se escriban 3 caracteres. Gracias a http://webteamalpha.com/triggering-datatables-to-search-only-on-enter-key-press/ por darme la luz.

    var dtable= $('#example').DataTable( {
        "deferRender": true,
        "processing": true,
        "serverSide": true,


        "ajax": "get_data.php",
        "initComplete": function() {
            var $searchInput = $('div.dataTables_filter input');

            $searchInput.unbind();

            $searchInput.bind('keyup', function(e) {
                if(this.value.length > 3) {
                    dtable.search( this.value ).draw();
                }
            });
        }

    } );
} );

Utilizar esta

   "fnServerData": function (sSource, aoData, fnCallback, oSettings) {

            if ($("#myDataTable_filter input").val() !== "" && $("#myDataTable_filter input").val().length < 3)
                return;
            oSettings.jqXHR = $.ajax({
                "dataType": 'json',
                "timeout":12000,
                "type": "POST",
                "url": sSource,
                "data": aoData,
                "success": fnCallback
            });
        }

aunque no responde a la pregunta original, tuve una búsqueda compleja y lenta en mis tablas de datos. el evento de filtro se activaba después de cada pulsación de tecla, lo que significaba un retraso bastante notable después de 10 caracteres. así que al introducir un breve retraso después de una pulsación de tecla antes de que se disparara el evento de filtro, donde una pulsación de tecla posterior restablecía el contador e impedía la búsqueda anterior, pude hacer que la búsqueda pareciera mucho más rápida. otros pueden encontrar esto útil.

Usé las respuestas de Stony y Christian Noel para hacer esto:

var dataTableFilterTimeout;
var dataTableFilterWait = 200; // number of milliseconds to wait before firing filter

$.fn.dataTableExt.oApi.fnSetFilteringEnterPress = function ( oSettings ) {
    var _that = this;
    this.each( function ( i ) {
        $.fn.dataTableExt.iApiIndex = i;
        var $this = this;
        var oTimerId = null;
        var sPreviousSearch = null;
        anControl = $( 'input', _that.fnSettings().aanFeatures.f );
        anControl.unbind( 'keyup' ).bind( 'keyup', function(e) {
            window.clearTimeout(dataTableFilterTimeout);
            if ( anControl.val().length > 2 || e.keyCode == 13){
                dataTableFilterTimeout = setTimeout(function(){
                    _that.fnFilter( anControl.val() );
                },dataTableFilterWait);
            }
        });
        return this;
    } );
    return this;
}

Puede retrasar la llamada ajax al servidor por esto

var search_thread = null;
    $(".dataTables_filter input")
        .unbind()
        .bind("input", function(e) { 
            clearTimeout(search_thread);
            search_thread = setTimeout(function(){
                var dtable = $("#list_table").dataTable().api();
                var elem = $(".dataTables_filter input");
                return dtable.search($(elem).val()).draw();
            }, 300);
        });

Este código detendrá la llamada ajax si el tiempo entre la pulsación de la tecla es inferior a 300 ms, de esa manera, cuando escribe una palabra, solo se ejecutará una llamada ajax y solo cuando deje de escribir. Puede 'jugar' con el parámetro de retardo (el 300) para obtener más o menos retardo

Probablemente tendrá que modificar el complemento.

Y en lugar de convertirlos en X caracteres, use un retraso, para que la búsqueda comience una vez que dejen de escribir durante aproximadamente 1 segundo.

Por lo tanto, el enlace de teclado / teclado que actualmente está activando la búsqueda se modificaría con un temporizador ...

var timer;
clearTimeout(timer);
timer = setTimeout(searchFunctionName, 1000 /* timeToWaitInMS */);

Versión fija para tablas de datos 1.10.12 usando API y desvinculando correctamente la 'entrada'. También se agregó la búsqueda clara en el retroceso por debajo del límite de caracteres.

    // Create the Datatable
    var pTable = $('#pTable').DataTable();

    // Get the Datatable input box and alter events
    $('.dataTables_filter input')
    .unbind('keypress keyup input')
    .bind('keypress keyup input', function (e) {
        if ($(this).val().length > 2) {
            pTable.search(this.value).draw();
        } else if (($(this).val().length == 2) && (e.keyCode == 8)) {
            pTable.search('').draw();
        }
    });

Si está usando la versión anterior, lo parece. La solución de Richard funciona bien. Pero cuando lo uso, solo agregué nuevos eventos, no eliminé. Porque cuando se ejecuta el código, la tabla aún no se crea. Entonces encontré que existe el método fnInitComplete (disparar cuando se crea la tabla) y lo apliqué a la solución de Ricard. Aquí está

$("#my_table").dataTable( {
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "bAutoWidth": false,
         ...
         ...,
         "fnInitComplete": function (oSettings, json) {
                    var activeDataTable = $(this).DataTable();
                    $("#my_table_filter input")
                        .unbind('keypress keyup')
                        .bind('keypress keyup', function (e) {

                        if ($(this).val().length < 3 || e.keyCode !== 13) return;
                        activeDataTable.fnFilter($(this).val());
                    });
                }

Puede usar este código en la tabla de datos de Medtronic u otro código para buscar después de usar 3 caracteres:

        onDataLoad: function (RequestGrid) {
            // execute some code on ajax data load
            var searchInput = $('div.dataTables_filter input').val();
            if (searchInput.length() > 3 || searchInput.length() ==0) {
                alert(searchInput);
                dt.draw();
            }
            else {
                return false;
            }
        },

searchInput.length () == 0 para el primer show.

¿Puede escribir su propia función para probar la longitud de la cadena ingresada adjunta a un controlador de eventos onKeyUp y activar la función de búsqueda una vez que se haya alcanzado la longitud mínima?

Algo parecido a:

input.onKeyUp (function () {
    if (input.length> 3) {
        mySearchfunction ();
    }
});

... es decir, en una especie de pseudocódigo pero obtienes la clave.

Puede utilizar el parámetro por nombre minlength para restringir la búsqueda hasta 3 caracteres:

function(request, response) {
    $.getJSON("/speakers/autocomplete", {  
        q: $('#keywordSearch').val()
    }, response);
}, minLength: 3

Puede obtener la longitud de los datos que se pasan utilizando data.currentTarget.value.length, consulte a continuación.

$('[id$="Search"]').keyup(function (data) {
            if (data.currentTarget.value.length > 2 || data.currentTarget.value.length == 0) {
                if (timoutOut) { clearTimeout(timoutOut); }
                timoutOut = setTimeout(function () {
                    var value = $('[id$="Search"]').val();
                    $('#jstree').jstree(true).search(value);
                }, 250);
            }
        });

y obviamente querrá que este código se ejecute al eliminar texto, así que configure el valor en 0

Esto funciona con DataTables versión 1.10.19. Solo requiere incluir js en la plantilla de su sitio web, útil para un sitio que tiene múltiples tablas de datos configuradas en diferentes páginas. También es útil para cualquier tabla de carga lenta de xhr, no permitirá nuevas solicitudes de xhr hasta que finalicen todas las que se están ejecutando actualmente. La función de búsqueda utilizada es muy similar a cómo el complemento configura la función de búsqueda originalmente.

(function(window, document, $){
var xhring = 0;

$(document).on( 'preXhr.dt', function () {
    xhring++;
} );
$(document).on( 'xhr.dt', function () {
    xhring--;
} );

//at a minimum wait the full freq, and wait for any pending XHR requests to finish before calling fn
function choke( fn, freq ) {
    var
        frequency = freq !== undefined ? freq : 200,
        last,
        timerFn,
        timer;

    return function () {
        var
            that = this,
            args = arguments;

        timerFn = function () {
            if (xhring || +new Date() < last + frequency) {
                clearTimeout( timer );
                timer = setTimeout( timerFn, frequency);
            } else {
                fn.apply( that, args );
            }
        }
        last = +new Date();

        clearTimeout( timer );
        timer = setTimeout( timerFn, frequency );
    };
}

//See https://github.com/DataTables/DataTables/blob/156faa83386460c578e00c460eca9766e38a0c5f/media/js/jquery.dataTables.js
//See https://github.com/DataTables/Plugins/blob/master/features/searchHighlight/dataTables.searchHighlight.js
$(document).on( 'preInit.dt', function (e, settings, json) {
    var previousSearch = settings.oPreviousSearch;

    var searchFn = function() {
        /* Update all other filter input elements for the new display */
        var val = !this.value ? "" : this.value; // mental IE8 fix :-(

        /* Now do the filter */                                                                                                  
        if ( val != previousSearch.sSearch && (val.length >= 3 || val == "")) {
            $.fn.dataTable.ext.internal._fnFilterComplete( settings, {
                "sSearch": val,
                "bRegex": previousSearch.bRegex,
                "bSmart": previousSearch.bSmart ,
                "bCaseInsensitive": previousSearch.bCaseInsensitive
            } );

            // Need to redraw, without resorting
            settings._iDisplayStart = 0;
            $.fn.dataTable.ext.internal._fnDraw( settings );
        }
    };

    var searchDelay = settings.searchDelay !== null ?                                                                            
        settings.searchDelay :
        $.fn.dataTable.ext.internal._fnDataSource( settings ) === 'ssp' ?
            700 :
            200;

    var jqFilter = $( 'input', settings.aanFeatures.f )
        .off('keyup.DT search.DT input.DT paste.DT cut.DT')
        .on('keyup.DT search.DT input.DT paste.DT cut.DT', choke(searchFn, searchDelay))
        ;
} );

})(window, document, jQuery);

¿Hay alguna razón por la que no solo verifique la longitud en el 'cambio'?

$('.input').change(function() {
  if( $('.input').length > 3 ) {
     //do the search
  }
});

Necesita modificar jquery.datatables.js

----- actualizado, por supuesto, puede verificar la longitud> 3, pero creo que aún necesita un temporizador. si tienes muchos datos, no querrás que se sigan filtrando después de cada actualización de personajes.

Dentro de este método:

jqFilter.keyup( function(e) {
            if ( **this.value**.length > 3) {
                var n = oSettings.aanFeatures.f;
                for ( var i=0, iLen=n.length ; i<iLen ; i++ )
                {
                    if ( n[i] != this.parentNode )
                    {
                        $('input', n[i]).val( this.value );
                    }
                }
                /* Now do the filter */
                _fnFilterComplete( oSettings, { 
                    "sSearch": this.value, 
                    "bRegex":  oSettings.oPreviousSearch.bRegex,
                    "bSmart":  oSettings.oPreviousSearch.bSmart 
                } );
         }
        } );

Agregue un temporizador al teclado, como se muestra en una de las respuestas.

Luego vaya a este sitio http://jscompress.com/

Y más allá de su código modificado y el js se minificará.