Question

背景

我有一个带搜索文本框和转发器的简单应用程序。当用户在搜索文本框中输入文本时，列表将按输入的文本进行过滤。以下是正常运行的javascript代码：

<script type="text/javascript">
    $(document).ready(function(){
        $('input').keyup(function(){
            localStorage.setItem("filterString", this.value);
            filter(this);
        });
    });

    function filter(element) {
        var value = $(element).val().toLowerCase();

        $(".panel").each(function () {
            if ($(this).text().toLowerCase().indexOf(value) > -1) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });
    }
</script>

我想做什么

我希望应用程序在用户返回此页面时保留已过滤的列表。

我尝试制作的方法是使用localStorage存储搜索字符串： localStorage.setItem("filterString", this.value);"

然后当调用window.onload时，我检索filterString，渲染搜索文本框，并调用过滤器函数。

问题和我尝试过的事情

这是我尝试过的代码：

window.onload = function()
{
    if(typeof(Storage) !== "undefined")
    {
         var filterString = localStorage.getItem("filterString");
         txtSearch.value = filterString;
         filter(filterString);
    }
 }

过滤器仍可在keyup上正常使用，但不适用于onload。

我也尝试过：

$(document).ready(function(){
    $('input').keyup(function () {
        localStorage.setItem("filterString", this.value);
        filter(this);
    });
    //Added this
    filter(localStorage.getItem("filterString"));
});

这仍然无效，如果我这样做，keyup上的过滤器就会停止工作。

为什么我无法调用filter函数？

任何建议表示赞赏。

Answer 1

问题是您通过将字符串作为参数传递来尝试调用filter函数，并且它希望您传递element。

因此，您应该将最后一个代码更改为：

$(document).ready(function(){
  $('input').keyup(function () {
    localStorage.setItem("filterString", this.value);
    filter(this);
  });
  // Change the input value to the localStorage value
  $('input').val(localStorage.getItem("filterString"));
  // And then, send the element to the filter
  filter($('input')[0]); ;
});

Answer 2

只需在document.ready函数中添加以下内容即可。请记住在现有功能之后调用它。

 $('input').keyup();

像这样

   $(document).ready(function(){
    $('input').keyup(function(){
        localStorage.setItem("filterString", this.value);
        filter(this);
    });
   $('input').keyup(); //added here ,after your keyup function
});

在window.onload中调用函数不起作用

背景

我想做什么

问题和我尝试过的事情

2 个答案: