jQuery DataTables: Затримуйте пошук, поки не буде введено 3 символи АБО натиснуто кнопку

Чи є, будь ласка, можливість розпочати пошук лише після введення 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'
        }
} );

Рішення для версії 1.10 -

Шукавши тут повну відповідь і не знайшовши її, я написав це (використовуючи код із документації та кілька відповідей тут).

Наведений нижче код працює для затримки пошуку, поки не буде введено принаймні 3 символи:

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

Примітка: Це стосувалося набагато більш ранньої версії таблиць даних, див. Цю відповідь для таблиць даних jQuery v1.10 і вище.

Це змінить поведінку поля введення, щоб фільтрувати лише тоді, коли було натиснуто або повернення, або якщо в пошуку є принаймні 3 символи:

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

Ви можете побачити, як він працює тут: http://jsbin.com/umuvu4/2 . Я не знаю, чому люди dataTables прив'язані як до натискання клавіш, так і до клавіатури, але я перевизначаю їх обох, щоб залишатися сумісними, хоча я думаю, що клавіатури достатньо.

Сподіваюся, це допомагає!

Чому б не спробувати цю розширену версію відповіді Стоні :)

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

});

Це затримає пошук, поки користувач не перестане вводити текст.

Сподіваюся, це допоможе.

Ось як це можна зробити зі зміною api у версії 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;
});

Моя версія таблиць даних 1.10.10

Я змінив дрібниці, і це працює зараз. Отже, я ділюсь, тому що було важко змусити його працювати для версії 1.10.10. Завдяки cale_b, Stony та Sam Barnes. Подивіться на код, щоб побачити, що я зробив.

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

    });

Ось скрипт, схожий на плагін, який розширює таблиці даних.

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

використання:

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

Це працює в 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

Для цього потрібно викликати виклик сервера після того, як користувач набрав у полі пошуку мінімальні символи, ви можете слідувати пропозиції Аллана :

налаштуйте функцію API плагіна fnSetFilteringDelay (), щоб додати додаткову умову щодо довжини рядка перед налаштуванням фільтра, також враховуючи введення порожнього рядка для очищення фільтра

Отже, принаймні 3 символи, просто змініть рядок № 19 у плагіні на:

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

для версії 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();
                }
            });
        }

    } );
} );

Використовуй це

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

хоча це не відповідає на вихідне запитання, я мав складний і повільний пошук у своїх таблицях даних. подія фільтра спрацьовувала після кожного натискання клавіші, що означало досить помітну затримку через 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;
}

Цим ви можете затримати виклик ajax на сервер

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

Цей код зупинить дзвінок ajax, якщо час між натисканням клавіші менше 300 мс, таким чином, коли ви пишете слово, буде виконуватися лише один дзвінок ajax і лише тоді, коли ви припините друкувати. Ви можете «пограти» з параметром затримки (300), щоб отримати більшу або меншу затримку

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

І замість того, щоб робити з нього символи X, використовуйте затримку, тому пошук розпочнеться, коли вони перестануть друкувати приблизно на 1 секунду.

Тож прив'язка клавіатури / клавіатури, яка в даний час ініціює пошук, буде змінена за допомогою таймера ...

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

Виправлена ​​версія для таблиць даних 1.10.12 з використанням API та коректного розв’язування «вводу». Також додано пошук, очищений у зворотному просторі з обмеженням кількості символів.

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

Якщо ви використовуєте стару версію, схоже. Рішення Річарда працює добре. Але коли я ним користуюся, я просто додаю нові події, а не видаляю. Тому що при запуску коду таблиця ще не створена. Тож я виявив, що існує метод fnInitComplete (запускається при створенні таблиці), і застосував його до рішення Рікарда. Ось

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

Ви можете використовувати цей код на таблиці даних Medtronic або інший код для пошуку після використання 3 символів:

        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 для першого шоу.

Чи можете ви написати власну функцію, щоб перевірити довжину введеної рядка, приєднаної до обробника події onKeyUp, і запустити функцію пошуку після досягнення мінімальної довжини?

Щось на зразок:

input.onKeyUp (function () {
    if (input.length> 3) {
        функція mySearch ();
    }
});

... тобто у вигляді псевдокоду, але ви отримуєте суть.

Ви можете використовувати параметр за назвою minlength, щоб обмежити пошук до 3 символів:

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

Ви можете отримати довжину даних, які передаються за допомогою 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

Це працює з DataTables версії 1.10.19. Потрібно лише включити js у шаблон веб-сайту - корисно для сайту, який має кілька таблиць даних, налаштованих на різних сторінках. Також корисно для будь-яких повільних таблиць завантаження xhr, не дозволятиме нових запитів xhr, поки всі поточно запущені закінчення. Функція пошуку дуже схожа на те, як плагін спочатку налаштовує функцію пошуку .

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

Чи є причина, чому ви не просто перевірите довжину на "зміну"?

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

Вам потрібно змінити 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 
                } );
         }
        } );

Додайте таймер до клавіатури, як показано в одній із відповідей.

Тоді перейдіть на цей сайт http://jscompress.com/

А минулий ваш змінений код і js скоротяться.