javascript - jqGrid 搜索延迟

Question

我使用带有选项 searchOnEnter: false 的 jqGrid 过滤器工具栏。在我在字段中输入一些文本后，它会立即发送请求。在我的应用程序中，最好等待用户输入他想要的文本并在他停止输入时搜索它。那么，在 jqGrid 中是否可以在请求发送到服务器之前添加延迟？

Answer 1

这是正确的问题，但 jqGrid 在应用自动搜索之前没有指定超时的选项。它始终为 500 毫秒。

如果您检查源代码，filterToolbar您会发现以下几行使用了该searchOnEnter选项。

$("input",thd).keydown(function(e){
    var key = e.which;
    switch (key) {
        case 13:
            return false;
        case 9 :
        case 16:
        case 37:
        case 38:
        case 39:
        case 40:
        case 27:
            break;
        default :
            if(timeoutHnd) { clearTimeout(timeoutHnd); }
            timeoutHnd = setTimeout(function(){triggerToolbar();},500);
    }
});

因此，您可以将几乎相同的代码与默认searchOnEnter: false选项一起使用，并triggerToolbar在您需要的超时后手动实现调用。例如，以下代码片段在搜索工具栏中键入后 3 秒（3000 毫秒）超时后开始搜索：

var timeoutHnd, k = $.ui.keyCode,
    toSkip = [k.TAB, k.SHIFT, k.ALT, k.ESCAPE, k.LEFT, k.UP, k.RIGHT, k.DOWN, k.HOME, k.END, k.INSERT];
$grid.jqGrid("filterToolbar", {defaultSearch: "cn"});
$grid.closest(".ui-jqgrid-view")
    .find(".ui-jqgrid-hdiv .ui-search-toolbar input[type=text]")
    .keydown(function (e) {
        var key = e.which;
        if (key === k.ENTER) {
            return false;
        }
        if ($.inArray(key, toSkip) < 0) {
            if (timeoutHnd) {
                clearTimeout(timeoutHnd);
                timeoutHnd = 0;
            }
            timeoutHnd = setTimeout(function () {
                $grid[0].triggerToolbar();
                timeoutHnd = 0;
            }, 3000);
        }
    });

这是相应的演示：

更新： jqGrid 的 免费 jqGrid分支支持autosearchDelay选项（默认值为 500），filterToolbar其中可以与autosearch: true（默认）和searchOnEnter: false. 因此，不需要上述技巧。一个可以使用

$grid.jqGrid("filterToolbar", {
    searchOnEnter: false,
    autosearchDelay: 3000 // 3 sec
});