jQuery DataTables: Trì hoãn tìm kiếm cho đến khi nhập được 3 ký tự HOẶC nhấp vào một nút

Xin vui lòng có một tùy chọn để bắt đầu tìm kiếm chỉ sau khi 3 ký tự đã được nhập vào?

Tôi đã viết một tập lệnh PHP cho các đồng nghiệp hiển thị 20.000 mục nhập và họ phàn nàn rằng khi nhập một từ, một vài ký tự đầu tiên khiến mọi thứ bị đóng băng.

Một giải pháp thay thế là bắt đầu tìm kiếm bằng một nút bấm chứ không phải gõ ký tự.

Dưới đây là mã hiện tại của tôi:

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

Giải pháp cho phiên bản 1.10 -

Sau khi tìm kiếm câu trả lời đầy đủ ở đây và không tìm thấy câu trả lời nào, tôi đã viết bài này (sử dụng mã từ tài liệu và một vài câu trả lời ở đây).

Đoạn mã dưới đây có tác dụng trì hoãn việc tìm kiếm cho đến khi nhập ít nhất 3 ký tự:

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

Lưu ý: Đây là cho phiên bản bảng dữ liệu cũ hơn nhiều, vui lòng xem câu trả lời này cho bảng dữ liệu jQuery v1.10 trở lên.

Điều này sẽ sửa đổi hành vi của hộp nhập để chỉ lọc khi trả về đã được nhấn hoặc có ít nhất 3 ký tự trong tìm kiếm:

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

Bạn có thể thấy nó hoạt động tại đây: http://jsbin.com/umuvu4/2 . Tôi không biết tại sao các thành viên DataTables lại ràng buộc với cả thao tác nhấn phím và nhấn phím, nhưng tôi đang ghi đè cả hai để giữ tương thích mặc dù tôi nghĩ rằng việc gõ phím là đủ.

Hi vọng điêu nay co ich!

Tại sao không thử phiên bản mở rộng này của câu trả lời 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);

});

Điều này sẽ trì hoãn việc tìm kiếm cho đến khi người dùng ngừng nhập.

Hy vọng nó giúp.

Đây là cách xử lý nó với thay đổi api trong phiên bả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;
});

Phiên bản của tôi về dữ liệu 1.10.10

Tôi đã thay đổi một số thứ và nó hoạt động ngay bây giờ. Vì vậy, tôi đang chia sẻ, rất khó để làm cho nó hoạt động cho phiên bản 1.10.10. Cảm ơn cale_b, Stony và Sam Barnes. Nhìn vào mã để xem những gì tôi đã làm.

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

    });

Đây là một tập lệnh giống như plugin mở rộng các dữ liệu.

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

sử dụng:

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

Việc cần làm là gọi máy chủ sau khi người dùng đã nhập các ký tự mininum vào hộp tìm kiếm, bạn có thể làm theo gợi ý của Allan :

tùy chỉnh hàm API trình cắm thêm fnSetFilteringDelay () để thêm một điều kiện bổ sung về độ dài chuỗi trước khi đặt bộ lọc, đồng thời xem xét đầu vào chuỗi trống để xóa bộ lọc

Vì vậy, với tối thiểu 3 ký tự, chỉ cần thay đổi dòng số 19 trong trình cắm thành:

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

Điều này hoạt động trên 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

cho phiên bản 1.10 thêm mã này vào javascript của bạn trong các tùy chọn. InitComplete sẽ ghi đè phương thức tìm kiếm và đợi đến 3 ký tự được viết. Cảm ơn http://webteamalpha.com/triggering-datatables-to-search-only-on-enter-key-press/ đã cho tôi ánh sáng.

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

    } );
} );

Dùng cái này

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

mặc dù nó không trả lời câu hỏi ban đầu, tôi đã có một tìm kiếm phức tạp và chậm chạp trên các dữ liệu của mình. sự kiện bộ lọc được kích hoạt sau mỗi lần nhấn phím, có nghĩa là độ trễ khá đáng chú ý sau 10 ký tự. do đó, bằng cách tạo ra một khoảng thời gian trễ ngắn sau một lần nhấn phím trước khi sự kiện bộ lọc được kích hoạt, trong đó lần nhấn phím tiếp theo sẽ đặt lại bộ đếm và ngăn tìm kiếm trước đó, tôi đã có thể làm cho việc tìm kiếm có vẻ nhanh hơn nhiều. những người khác có thể thấy điều này hữu ích.

tôi đã sử dụng câu trả lời từ stony và christian noel để làm điều này:

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

Bạn có thể trì hoãn cuộc gọi ajax tới máy chủ bằng cách này

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

Mã này sẽ dừng cuộc gọi ajax nếu thời gian từ khi nhấn phím đến khi nhấn phím nhỏ hơn 300 ms, theo cách đó khi bạn viết một từ, chỉ một lệnh gọi ajax sẽ chạy và chỉ khi bạn ngừng nhập. Bạn có thể 'chơi' với thông số độ trễ (300) để có độ trễ nhiều hơn hoặc ít hơn

Có thể bạn sẽ phải sửa đổi plugin.

Và thay vì đặt nó thành ký tự X, hãy sử dụng độ trễ để tìm kiếm bắt đầu sau khi họ ngừng nhập trong 1 giây hoặc lâu hơn.

Vì vậy, liên kết keydown / keyup hiện đang kích hoạt tìm kiếm sẽ được sửa đổi bằng bộ đếm thời gian ...

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

Phiên bản đã sửa lỗi cho các dữ liệu 1.10.12 sử dụng API và hủy liên kết 'đầu vào' một cách chính xác. Cũng đã thêm tìm kiếm rõ ràng trên backspace dưới giới hạn ký tự.

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

Nếu bạn đang sử dụng phiên bản cũ thì có vẻ như vậy. Giải pháp của Richard hoạt động tốt. Nhưng khi sử dụng, tôi chỉ thêm sự kiện mới chứ không xóa. Bởi vì khi chạy mã, bảng vẫn chưa được tạo. Vì vậy, tôi thấy rằng có phương thức fnInitComplete (kích hoạt khi bảng được tạo) và tôi đã áp dụng nó vào giải pháp của Ricard. Nó đây

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

Bạn có thể sử dụng mã này trên cơ sở dữ liệu Medtronic hoặc mã khác để tìm kiếm sau khi sử dụng 3 ký tự:

        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 cho chương trình đầu tiên.

Bạn có thể viết hàm của riêng mình để kiểm tra độ dài của chuỗi nhập kèm theo trình xử lý sự kiện onKeyUp và kích hoạt hàm tìm kiếm khi đã đạt đến độ dài tối thiểu không?

Một cái gì đó dọc theo dòng của:

input.onKeyUp (function () {
    if (input.length> 3) {
        mySearch Chức năng ();
    }
});

... nghĩa là, theo một kiểu mã giả, nhưng bạn nhận được jist.

Bạn có thể sử dụng tham số theo tên minlength để giới hạn tìm kiếm cho đến 3 ký tự:

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

Bạn có thể lấy độ dài của dữ liệu đang được chuyển bằng data.currentTarget.value.length, vui lòng xem bên dưới.

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

và rõ ràng là bạn muốn mã này chạy khi xóa văn bản, vì vậy hãy đặt giá trị thành 0

Điều này hoạt động với DataTables phiên bản 1.10.19. Nó chỉ yêu cầu bao gồm js trong mẫu trang web của bạn - hữu ích cho một trang web có nhiều Bảng dữ liệu được định cấu hình trên các trang khác nhau. Cũng hữu ích cho bất kỳ bảng tải xhr chậm nào, sẽ không cho phép bất kỳ yêu cầu xhr mới nào cho đến khi tất cả các bảng hiện đang chạy kết thúc. Chức năng tìm kiếm được sử dụng rất giống với cách plugin thiết lập chức năng tìm kiếm ban đầu.

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

Có lý do gì bạn không chỉ kiểm tra độ dài trên 'thay đổi'?

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

Bạn cần sửa đổi jquery.datatables.js

----- đã cập nhật tất nhiên bạn có thể kiểm tra độ dài> 3, nhưng tôi nghĩ bạn vẫn cần một bộ đếm thời gian. nếu bạn có nhiều dữ liệu, bạn không muốn tiếp tục lọc dữ liệu sau mỗi lần cập nhật ký tự.

Trong phương pháp này:

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

Thêm bộ hẹn giờ vào thao tác bàn phím, như được hiển thị trong một trong các câu trả lời.

Sau đó, truy cập trang web này http://jscompress.com/

Và quá khứ mã đã sửa đổi của bạn và js sẽ được rút gọn.