Javascript 使用从上一页传入的输入值在页面加载时筛选列表_Javascript_Html_Dom_Input_Filter

Javascript 使用从上一页传入的输入值在页面加载时筛选列表

javascript html dom input filter

Javascript 使用从上一页传入的输入值在页面加载时筛选列表,javascript,html,dom,input,filter,Javascript,Html,Dom,Input,Filter,好吧，这对我来说可能很难解释，但我会试一试。我有两个HTML页面：form.HTML和display.HTML。表单页面有一个输入，该输入获取一个值，然后在表单提交后将其放入本地存储。表单提交后，用户将被带到显示页面，然后显示页面将从本地存储检索上一页面的输入值，然后在显示页面的输入字段中显示该值。显示页面稍后将用作作业页面，该页面将显示可通过同一页面上输入字段内的值进行过滤的作业列表。我可以通过在输入字段上使用onkeyup使filter函数工作，但我不能通过使用onload之类的东西使fil

好吧，这对我来说可能很难解释，但我会试一试。我有两个HTML页面：form.HTML和display.HTML。表单页面有一个输入，该输入获取一个值，然后在表单提交后将其放入本地存储。表单提交后，用户将被带到显示页面，然后显示页面将从本地存储检索上一页面的输入值，然后在显示页面的输入字段中显示该值。显示页面稍后将用作作业页面，该页面将显示可通过同一页面上输入字段内的值进行过滤的作业列表。我可以通过在输入字段上使用onkeyup使filter函数工作，但我不能通过使用onload之类的东西使filter函数与上一页的输入值一起工作。我之所以使用两个页面，是因为我以后会在一个网站上使用这段代码，该网站的登录页上会有一个搜索框，然后会指向带有过滤结果的Jobs页面。如果这真的很难理解，我很抱歉，我将在下面发布代码，以便您更好地理解

非常感谢所有抽出时间帮助我解决这个问题的人，非常感谢

form.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        function passValues() {
            var firstName = document.getElementById("txt").value;
            localStorage.setItem("textValue", firstName);
            return false;
        }
    </script>
</head>

<body>
    <form action="display.html">
        <input type="text" id="txt" />
        <input type="submit" value="Click" onclick="passValues();" />
    </form>
</body>

</html>

display.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <h1>Tokyo Expat Job Search</h1>
    <input onload="filter()" onkeyup="filter()" id="result" type="text">

    <ul id="Menu">
        <li><a href="#">English Techer</a></li>
        <li><a href="#">Waiter/Waitress</a></li>
        <li><a href="#">Developer</a></li>
        <li><a href="#">Banker</a></li>
        <li><a href="#">Designer</a></li>
        <li><a href="#">Logistics</a></li>
    </ul>

    <script>
        function filter() {

            var filterValue, input, ul, li, a, i;
            input = document.getElementById("result");
            filterValue = input.value.toUpperCase();
            ul = document.getElementById("Menu");
            li = ul.getElementsByTagName("li");

            for (i = 0; i < li.length; i++) {
                a = li[i].getElementsByTagName("a")[0];
                if (a.innerHTML.toUpperCase().indexOf(filterValue) > -1) {
                    li[i].style.display = "";

                } else {
                    li[i].style.display = "none";
                }
            }
        }


        document.getElementById("result").value = localStorage.getItem("textValue");
    </script>
</body>

</html>

是否尝试将侦听器添加到window.onload？输入没有这样的事件

window.addEventListener'load'，filter，false

非常感谢您的回复！我试过你的建议，但对我无效。你的代码在你这边起作用了吗？也许我把密码放错地方了？目前我对dom不太熟悉，我还在学习。任何进一步的帮助都将不胜感激。我希望我没有误解。我只是把代码放在脚本的开头，然后当您跳转到那里时，列表将被过滤。如果它仍然不适用于您，只需在脚本末尾直接尝试调用筛选器。非常感谢！代码是有效的。我只是把它放错地方了。哈哈！再次感谢您的帮助，非常感谢！