jQuery DataTables: задержка поиска до 3-х символов или нажатие кнопки

Question

Есть ли возможность начать поиск только после ввода 3 символов?

Я написал PHP-скрипт для коллег, отображающий 20 000 записей, и они жалуются, что при наборе слова первые несколько букв приводят к зависанию всего.

Альтернативой может быть запуск поиска нажатием кнопки, а не набором символов.

Ниже мой текущий код:

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

Answer 1

для версии 1.10 добавьте этот код в свой javascript в настройках. InitComplete переопределяет метод поиска и ждет, пока не будет написано 3 символа. Спасибо http://webteamalpha.com/triggering-datatables-to-search-only-on-enter-key-press/ за то, что дали мне свет.

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

    } );
} );

Answer 2

, хотя он не отвечает на первоначальный вопрос, у меня был сложный и медленный поиск в моих данных.событие фильтра срабатывало после каждого нажатия клавиши, что означало довольно заметную задержку после 10 символов.поэтому, введя небольшую задержку после нажатия клавиши до срабатывания события фильтра, когда последующее нажатие клавиши сбросило счетчик и предотвратило предыдущий поиск, я смог сделать поиск более быстрым.другие могут найти это полезным.

я использовал ответы Стоуни и Кристиана Ноэля, чтобы сделать это:

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

Answer 3

Исправлена ​​версия для datatables 1.10.12, использующая API и корректно отменяющая привязку 'input'.Также добавлен поиск очистки на backspace под символьным ограничением.

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

Answer 4

Возможно, вам придется изменить плагин.

И вместо того, чтобы делать это X символами, используйте задержку, поэтому поиск начинается, как только они прекращают печатать в течение 1 секунды или около того.

Таким образом, привязка keydown / keyup, которая в данный момент запускает поиск, будет изменена с помощью таймера ...

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

Answer 5

Вы можете получить длину данных, которые передаются, используя data.currentTarget.value.length, см. Ниже.

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

и, очевидно, вы захотите, чтобы этот код запускался при удалении текстапоэтому установите значение 0

Answer 6

Есть ли причина, по которой вы бы не просто проверяли длину при 'change'?

Answer 7

Вам нужно изменить jquery.datatables.js

----- обновлено Конечно, вы можете проверить длину> 3, но я думаю, что вам все еще нужен таймер. если у вас много данных, вы не хотите продолжать фильтровать их после каждого обновления персонажа.

В рамках этого метода:

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

Добавьте таймер к keyup, как показано в одном из ответов.

Тогда перейдите на этот сайт http://jscompress.com/

И после того, как ваш модифицированный код и js будут уменьшены.

Answer 8

Вы можете использовать параметр по имени minlength, чтобы ограничить поиск до 3 символов:

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

Answer 9

Можете ли вы написать свою собственную функцию для проверки длины введенной строки, присоединенной к обработчику события onKeyUp, и активировать функцию поиска после достижения минимальной длины?

Что-то вроде:

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

... то есть, в некотором роде псевдокодом, но вы получаете jist.