javascript - jQuery 和动态库

Question

我正在使用这个库:https://github.com/Dynamitable/Dynamitable

这非常好，目前对我来说非常有效。

当我尝试过滤它时(例如当我在输入字段中输入“abc”时过滤“名称”​​)，所有行都会消失，以便向我显示包含“abc”的每个“名称”rown。所以这很好!

我的问题是，我使用的是一个非常大的表，并且过滤器对我来说“太”好用了。我的意思是，在它开始工作之前我无法输入我的整个“研究”。

所以，我的问题是，是否可以添加“延迟”，以便让人们在开始过滤之前输入一些字母？ 0.5 秒甚至 1 秒之类的东西？

我曾尝试在第 150/153 行上玩这个，但没有成功:

$(selector).on('change keyup keydown', filterAction);
            
// initialization
filterAction();

Answer 1

我的建议是断开原来的过滤器并添加您自己的过滤器，并且能够仅在 n 个字符之后启动过滤。

在下面的示例中:

$('.js-dynamitable .js-filter').off('change keyup keydown').on('change keyup keydown', function (e) {
    //
    // start filtering on text input only after 2 chars
    //
    if ($(this).is(':text') && $(this).val().length < 2) {
        return;  // stop filtering
    }
    var index = $(this).closest('tr').children('td, th').index($(this).closest('td, th'));
    var dynamitable = $('.js-dynamitable').dynamitable();
    dynamitable.displayAll();
    $(dynamitable).find('.js-filter').each(function () {
        var $this = $(this);
        dynamitable.filter(index, $this.val());
    });
});

.glyphicon {
    cursor: pointer;
}

input, select {
    width: 100%;
}

.second, .glyphicon-chevron-down, .glyphicon-chevron-up {
    color: red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://rawgit.com/Dynamitable/Dynamitable/master/dynamitable.jquery.js"></script>

<div class="col-xs-12  col-sm-12 col-md-10 col-md-offset-1 col-lg-10  col-lg-offset-1">
    <h1><span class="first">Dynami</span><span class="second">table</span></h1>
    <div class="table-responsive">
        <table class="js-dynamitable     table table-bordered">
            <thead>
            <tr>
                <th>Name
                    <span class="js-sorter-desc     glyphicon glyphicon-chevron-down pull-right"></span>
                    <span class="js-sorter-asc     glyphicon glyphicon-chevron-up pull-right"></span>
                </th>
                <th>Email
                    <span class="js-sorter-desc     glyphicon glyphicon-chevron-down pull-right"></span>
                    <span class="js-sorter-asc     glyphicon glyphicon-chevron-up pull-right"></span>
                </th>
                <th>Age
                    <span class="js-sorter-desc     glyphicon glyphicon-chevron-down pull-right"></span>
                    <span class="js-sorter-asc     glyphicon glyphicon-chevron-up pull-right"></span>
                </th>
                <th>Account
                    <span class="js-sorter-desc     glyphicon glyphicon-chevron-down pull-right"></span>
                    <span class="js-sorter-asc     glyphicon glyphicon-chevron-up pull-right"></span>
                </th>
                <th>Scoring
                    <span class="js-sorter-desc     glyphicon glyphicon-chevron-down pull-right"></span>
                    <span class="js-sorter-asc     glyphicon glyphicon-chevron-up pull-right"></span>
                </th>
            </tr>
            <tr>
                <th>
                    <input class="js-filter  form-control" type="text" value="">
                </th>
                <th>
                    <select class="js-filter  form-control">
                        <option value=""></option>
                        <option value="@dynamitable.com">dynamitable.com</option>
                        <option value="@sample.com">Sample</option>
                    </select>
                </th>
                <th><input class="js-filter  form-control" type="text" value=""></th>
                <th><input class="js-filter  form-control" type="text" value=""></th>
                <th><input class="js-filter  form-control" type="text" value=""></th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>Freddy Krueger</td>
                <td>freddy.krueger@sample.com</td>
                <td class="text-right">122</td>
                <td class="text-right">2300$</td>
                <td class="text-right">+15</td>
            </tr>
            <tr>
                <td>Clint Eastwood</td>
                <td>clint.eastwood@sample.com</td>
                <td class="text-right">62</td>
                <td class="text-right">48 500$</td>
                <td class="text-right">+12</td>
            </tr>
            <tr>
                <td>Peter Parker</td>
                <td>peter.parker@dynamitable.com</td>
                <td class="text-right">22</td>
                <td class="text-right">210$</td>
                <td class="text-right">-5</td>
            </tr>
            <tr>
                <td>Bruce Wayne</td>
                <td>bruce.wayne@dynamitable.com</td>
                <td class="text-right">42</td>
                <td class="text-right">-8500$</td>
                <td class="text-right">+2</td>
            </tr>
            <tr>
                <td>Jackie Chan</td>
                <td>jackie.chan@sample.com</td>
                <td class="text-right">32</td>
                <td class="text-right">-250.55$</td>
                <td class="text-right">0</td>
            </tr>
            <tr>
                <td>Bruce Lee</td>
                <td>bruce.lee@sample.com</td>
                <td class="text-right">32</td>
                <td class="text-right">510$</td>
                <td class="text-right">-7</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>