Question

我目前在我的代码中使用multifilter（位于https://tommyp.github.io/multifilter/的jquery插件）。如果您查看该链接，它将向您展示如何实时过滤表格。我的问题是，刷新页面时，我输入到输入框中的任何文本都会丢失。我发现如果将输入设置为autocomplete = on，就像这样：

<input autocomplete='on' class='filter' name='name' placeholder='name' data-col='name'/>

它将保留输入框中的值。但是，它不会在刷新时触发multifilter.js，要求我仍然在输入框中输入内容。

刷新后如何触发插件，以便表格将根据输入框中的文本自动过滤结果？

Answer 1

您将无法使用autocomplete，因为自动完成是一项用于其他功能（w3schools autocomplete）的功能：

自动完成功能使浏览器可以预测值。当用户开始输入字段时，浏览器应根据较早键入的值显示用于填写字段的选项。

localStorage是解决问题的一个好方法。

以下代码是您想要的：

$(document).ready(function() {
    var name = localStorage.getItem('name') || '';

    $("#name").val(name);
    $('.filter').multifilter(); // for filtering values in the table

    $('#name').keyup(function(e) {
        var name = $(this).val();

        localStorage.setItem('name', name);
    });
});

以上代码使用localStorage API来获取已通过调用localStorage.setItem()设置的值，并将input的值设置为等于从{ getItem()个电话。然后，每次用户在input中输入内容时，代码都会进行检查，并保存值供以后使用localStorage.setItem()进行检索。

这样，该值是持久性的，并且每次用户刷新页面时，由于该值是使用localStorage存储的，因此它会使用input将值加载到localStorage中（注意您确实需要启用第三方Cookie才能使用lcoalStorage。

如何在刷新时自动基于多列过滤表而又不会丢失输入框中的文本？

1 个答案: