Question

我想感谢你一看！

然而我的问题是我的搜索框在搜索时会造成很多延迟，这是因为它具有搜索仍在键入的功能，它正在搜索大约300-350个项目。我似乎无法弄清楚如何解决这个问题，我正在寻找一些指导或解决方案！

＆＃13;

        <div class="col-md-3 pull-right">
            <form action="#" method="get">
                <div class="input-group">
                    <input class="form-control" id="system-search" name="q" placeholder="Find a Player.." required>
                    <span class="input-group-btn">
                        <button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search" style="padding-top: 3px;padding-bottom: 3px;background-color:rgb(33, 154, 83);color:white;
    text-shadow: 0 1px 0 rgb(33, 154, 83);"></i></button>
                    </span>
                </div>
            </form>
        </div>

＆＃13;

<table id='agent_commission_model' class="table table-list-search" style="margin-top:30px;">

＆＃13;

$(document).ready(function() {
    var activeSystemClass = $('.list-group-item.active');

    //something is entered in search form
    $('#system-search').keyup( function() {
       var that = this;
        // affect all table rows on in systems table
        var tableBody = $('.table-list-search tbody');
        var tableRowsClass = $('.table-list-search tbody tr');
        $('.search-sf').remove();
        tableRowsClass.each( function(i, val) {
        
            //Lower text for case insensitive
            var rowText = $(val).text().toLowerCase();
            var inputText = $(that).val().toLowerCase();
            if(inputText != '')
            {
                $('.search-query-sf').remove();
                tableBody.prepend('<tr class="search-query-sf"><td colspan="6"><strong>Searching for: "'
                    + $(that).val()
                    + '"</strong></td></tr>');
            }
            else
            {
                $('.search-query-sf').remove();
            }

            if( rowText.indexOf( inputText ) == -1 )
            {
                //hide rows
                tableRowsClass.eq(i).hide();
                
            }
            else
            {
                $('.search-sf').remove();
                tableRowsClass.eq(i).show();
            }
        });
        //all tr elements are hidden
        if(tableRowsClass.children(':visible').length == 0)
        {
            tableBody.append('<tr class="search-sf"><td class="text-muted" colspan="6">No entries found.</td></tr>');
        }
    });
});

＆＃13;

（另外我也不太清楚如何标记这个，或者如果它错了就称它为赦免）

Answer 1

人们可能每秒输入几个字符，因此您应该以这种方式延迟搜索：

var delay=null;
//something is entered in search form
$('#system-search').keyup( function() {
    clearTimeout( delay );
    delay = setTimeout( yourSearchFunction, 300);
)};

此外，逐行添加行不是一个好的解决方案，更好地收集所有新的dom元素并立即附加它们。

此外，在循环内部：

 tableRowsClass.each( function(i, val) {

使用

 tableRowsClass.eq(i)

没有多大意义，应该是：

 tableRowsClass.each( function(i, row) {
      var thisRow = $(row);
      /* than for example use */
      thisRow.hide();

我建议你重新开始并简化dom操作。

JS / JQuery搜索框导致延迟

1 个答案: