jQuery“onEmpty”事件类型的 Ajax AutoComplete答案

【问题标题】：Ajax AutoComplete for jQuery "onEmpty"-type of eventjQuery“onEmpty”事件类型的 Ajax AutoComplete
【发布时间】：2018-02-08 20:20:19
【问题描述】：

我正在使用 Ajax Autocomplete for Jquery (https://www.devbridge.com/sourcery/components/jquery-autocomplete/) 和 DataTables 来搜索特定列。

使用自动完成中的onSearchComplete 和onSelect，我可以在用户输入时（onSearchComplete）和选择条目时（onSelect）一起过滤输入和表格：

$("#scoreboard_site_name_filter").autocomplete({
    serviceUrl: "/wiki/extensions/CFBHA/models/_mSiteNames.php",
    onSearchComplete: function(suggestion) {
        update_scoreboard_by_site_name_filter(suggestion);
    },
    onSelect: function(suggestion) {
        update_scoreboard_by_site_name_filter(suggestion);
    }
});

function update_scoreboard_by_site_name_filter(suggestion) {
    var colname = "site_name:name";
    if (scoreboard.column(colname).search() !== suggestion) {
        scoreboard.column(colname).search(suggestion).draw();
    }
};

但是，当输入被删除时，DataTable 会在最后一个输入上进行过滤，因为在这种情况下不会触发任何事件。

我已尝试在输入本身上使用 keyup 和 change 事件将空字符串传递给 DataTable 搜索：

$("#scoreboard_site_name_filter").on("keyup change", function() {
    var suggestion = "";
    update_scoreboard_by_site_name_filter(suggestion);
});

如果我把它放在自动完成之前，那么它没有任何影响，如果我把它放在之后，我当然失去了在我输入时过滤表格的能力，因为它在自动完成之后触发。

如何检测输入何时被删除，然后在空字符串上重新过滤表（即清除该过滤器）？

【问题讨论】：

标签： autocomplete datatables jquery-ui-autocomplete

【解决方案1】：

好吧，我想多了。 . .

我删除了 onSearchComplete 事件，只是在输入本身上添加了 input 事件，一切正常。

我将 onSelect 留给自动完成功能，现在正确传递 suggestion.value 而不是 suggestion。

这里是任何感兴趣的人的正确代码：

$("#scoreboard_site_name_filter").on("keyup change", function() {
    update_scoreboard_by_site_name_filter(this.value);
});
$("#scoreboard_site_name_filter").autocomplete({
    serviceUrl: "/wiki/extensions/CFBHA/models/_mSiteNames.php",
    onSelect: function(suggestion) {
        update_scoreboard_by_site_name_filter(suggestion.value);
    }
});

function update_scoreboard_by_site_name_filter(suggestion) {
    var colname = "site_name:name";
    if (scoreboard.column(colname).search() !== suggestion) {
        scoreboard.column(colname).search(suggestion).draw();
    }
};

此外，我更新了代码以在实际选择（单击或输入）建议时进行搜索正则表达式，并向输入添加一个类作为指示表现在已根据该确切搜索词过滤：

$("#scoreboard_site_name_filter").on("input", function() {
    update_scoreboard_by_site_name_filter(this.value, false);
});
$("#scoreboard_site_name_filter").autocomplete({
    serviceUrl: "/wiki/extensions/CFBHA/models/_mSiteNames.php",
    onSelect: function(suggestion) {
        update_scoreboard_by_site_name_filter(suggestion.value, true);
    }
});

function update_scoreboard_by_site_name_filter(suggestion, selected) {
    var colname = "site_name:name";
    if (!selected) {
        scoreboard.column(colname).search(suggestion).draw();
        $("#scoreboard_site_name_filter").removeClass("autocomplete-input-selected");
    } else {
        scoreboard.column(colname).search("^" + suggestion + "$", true, false).draw();
        $("#scoreboard_site_name_filter").addClass("autocomplete-input-selected");
    };
};

【讨论】：