jQuery DataTables: Verzögern Sie die Suche, bis 3 Zeichen eingegeben oder eine Schaltfläche angeklickt wurden

Gibt es bitte eine Option, um die Suche erst zu starten, nachdem 3 Zeichen eingegeben wurden?

Ich habe ein PHP-Skript für Kollegen geschrieben, das 20.000 Einträge anzeigt, und sie beschweren sich, dass beim Eingeben eines Wortes die ersten Buchstaben dazu führen, dass alles einfriert.

Eine Alternative wäre, die Suche durch Klicken auf eine Schaltfläche und nicht durch Eingabe von Zeichen zu starten.

Unten ist mein aktueller Code:

$("#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'
        }
} );

Lösung für Version 1.10 -

Nachdem ich hier nach einer vollständigen Antwort gesucht und keine gefunden habe, habe ich diese geschrieben (unter Verwendung von Code aus der Dokumentation und einigen Antworten hier).

Der folgende Code verzögert die Suche, bis mindestens 3 Zeichen eingegeben wurden:

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

Hinweis: Dies war für eine viel frühere Version von Datentabellen. Weitere Informationen finden Sie in dieser Antwort für jQuery-Datentabellen v1.10 und höher.

Dadurch wird das Verhalten des Eingabefelds so geändert, dass nur gefiltert wird, wenn entweder die Eingabetaste gedrückt wurde oder mindestens 3 Zeichen in der Suche enthalten sind:

$(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());
    });
});

Sie können es hier sehen: http://jsbin.com/umuvu4/2 . Ich weiß nicht, warum die dataTables-Leute sowohl an den Tastendruck als auch an den Tastendruck gebunden sind, aber ich überschreibe beide, um kompatibel zu bleiben, obwohl ich denke, dass der Tastendruck ausreichend ist.

Hoffe das hilft!

Warum probieren Sie nicht diese erweiterte Version von Stony's Antwort :)

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

});

Dies verzögert die Suche, bis der Benutzer die Eingabe beendet hat.

Ich hoffe es hilft.

Hier erfahren Sie, wie Sie mit der API-Änderung in Version 1.10 umgehen können

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

Hier ist ein Plugin-ähnliches Skript, das Datentabellen erweitert.

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

Verwendung:

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

Meine Version der Datentabellen 1.10.10

Ich habe ein paar Dinge geändert und es funktioniert jetzt. Ich teile also, weil es schwierig war, es für Version 1.10.10 zum Laufen zu bringen. Vielen Dank an cale_b, Stony und Sam Barnes. Schauen Sie sich den Code an, um zu sehen, was ich getan habe.

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

    });

Um den Serveraufruf aufzurufen, nachdem der Benutzer die Mindestzeichen in das Suchfeld eingegeben hat, können Sie Allans Vorschlag folgen :

Anpassen der fnSetFilteringDelay () Plug-In - API - Funktion eine zusätzliche Bedingung auf der String - Länge hinzuzufügen , bevor die Filtereinstellung, auch einen leeren String - Eingang unter Berücksichtigung des Filters löschen

Ändern Sie für mindestens 3 Zeichen einfach Zeile 19 im Plug-In in:

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

Dies funktioniert in 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

Für die Version 1.10 fügen Sie diesen Code in den Optionen zu Ihrem Javascript hinzu. Die initComplete überschreibt die Suchmethode und wartet, bis 3 Zeichen geschrieben sind. Vielen Dank an http://webteamalpha.com/triggering-datatables-to-search-only-on-enter-key-press/ für das Licht.

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

    } );
} );

Benutze das

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

Obwohl es die ursprüngliche Frage nicht beantwortet, hatte ich eine komplexe und langsame Suche in meinen Datentabellen. Das Filterereignis wurde nach jedem Tastendruck ausgelöst, was eine merkliche Verzögerung nach 10 Zeichen bedeutete. Durch die Einführung einer kurzen Verzögerung nach einem Tastendruck vor dem Auslösen des Filterereignisses, bei der ein nachfolgender Tastendruck den Zähler zurücksetzte und die vorherige Suche verhinderte, konnte ich die Suche viel schneller erscheinen lassen. andere mögen dies hilfreich finden.

Ich habe die Antworten von Stony und Christian Noel verwendet, um dies zu machen:

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

Sie können den Ajax-Aufruf an den Server dadurch verzögern

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

Dieser Code stoppt den Ajax-Aufruf, wenn die Zeit zwischen dem Drücken der Taste weniger als 300 ms beträgt. Wenn Sie also ein Wort schreiben, wird nur ein Ajax-Aufruf ausgeführt und nur, wenn Sie aufhören zu tippen. Sie können mit dem Verzögerungsparameter (300) "spielen", um mehr oder weniger Verzögerung zu erhalten

Sie müssen wahrscheinlich das Plugin ändern.

Und anstatt es zu X-Zeichen zu machen, verwenden Sie eine Verzögerung, damit die Suche beginnt, sobald sie etwa 1 Sekunde lang nicht mehr tippen.

Die Keydown / Keyup-Bindung, die derzeit die Suche auslöst, würde also mit einem Timer geändert ...

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

Feste Version für Datentabellen 1.10.12 mit API und korrekter Entbindung der 'Eingabe'. Außerdem wurde die Suche auf der Rücktaste unter der Zeichenbeschränkung gelöscht.

    // 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();
        }
    });

Wenn Sie die alte Version verwenden, sieht es so aus. Richards Lösung funktioniert gut. Aber wenn ich es benutze, habe ich nur neue Ereignisse hinzugefügt und nicht gelöscht. Denn wenn Code ausgeführt wird, ist die Tabelle noch nicht erstellt. Also fand ich heraus, dass es die fnInitComplete-Methode gibt (Feuer beim Erstellen einer Tabelle) und habe sie auf Ricards Lösung angewendet. Hier ist es

$("#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());
                    });
                }

Sie können diesen Code für Medtronic-Datentabellen oder anderen Code verwenden, um nach Verwendung von 3 Zeichen zu suchen:

        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 für die erste Show.

Können Sie eine eigene Funktion schreiben, um die Länge der eingegebenen Zeichenfolge zu testen, die an einen onKeyUp-Ereignishandler angehängt ist, und die Suchfunktion auslösen, sobald die Mindestlänge erreicht ist?

Etwas in der Art von:

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

... das heißt, auf eine Art Pseudocode, aber Sie bekommen den Jist.

Sie können den Parameter nach Name minlength verwenden, um die Suche auf 3 Zeichen zu beschränken:

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

Die Länge der Daten, die übergeben werden, können Sie mit data.currentTarget.value.length ermitteln (siehe unten).

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

und natürlich möchten Sie, dass dieser Code beim Entfernen von Text ausgeführt wird. Setzen Sie den Wert daher auf 0

Dies funktioniert mit DataTables Version 1.10.19. Es ist nur erforderlich, die js in Ihre Website-Vorlage aufzunehmen - nützlich für eine Site, auf der mehrere dataTables auf verschiedenen Seiten konfiguriert sind. Auch nützlich für langsame xhr-Ladetabellen, lässt keine neuen xhr-Anforderungen zu, bis alle aktuell ausgeführten beendet sind. Die verwendete Suchfunktion ist der ursprünglichen Einrichtung der Suchfunktion durch das Plugin sehr ähnlich .

(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);

Gibt es einen Grund, warum Sie die Länge nicht einfach auf "Ändern" überprüfen würden?

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

Sie müssen die Datei jquery.datatables.js ändern

----- Natürlich aktualisiert Sie können die Länge> 3 überprüfen, aber ich denke, Sie brauchen noch einen Timer. Wenn Sie viele Daten haben, möchten Sie diese nicht nach jeder Charakteraktualisierung weiter filtern lassen.

Innerhalb dieser Methode:

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

Fügen Sie dem Keyup einen Timer hinzu, wie in einer der Antworten gezeigt.

Dann gehen Sie zu dieser Seite http://jscompress.com/

Und nach Ihrem geänderten Code werden die js minimiert.