javascript - jqGrid 搜索延迟

Question

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

Answer 1

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

如果您检查 filterToolbar 的源代码，您会发现 the following lines它使用 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);
        }
    });

Here是对应的demo:

更新: Free jqGrid jqGrid 的分支支持 filterToolbar 的 autosearchDelay 选项(默认值为 500)，它可以与 autosearch: true(默认)结合使用，并且searchOnEnter:false。因此，不需要上述技巧。一个人可以使用

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