我对此感到困惑,希望有人能帮助我。
我制作了一个过滤器,当您按下过滤器按钮时显示输入和过滤器。
当我按下过滤器按钮时,我想重定向到另一个网页并显示(输入类型和过滤结果)结果。我怎么能这样做?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 12px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li a {
border: 1px solid #ddd;
margin-top: -1px; /* Prevent double borders */
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block
}
#myUL li a:hover:not(.header) {
background-color: #eee;
}
</style>
</head>
<body>
<h2>My Phonebook</h2>
<input type="text" id="myInput" placeholder="Search for names.." title="Type in a name">
<button onclick="myfilter(), mydisplay();">Filter</button>
Search results for <span id="demo"></span>
<hr>
<ul id="myUL">
<li><a href="#">Adele</a></li>
<li><a href="#">Agnes</a></li>
<li><a href="#">Billy</a></li>
<li><a href="#">Bob</a></li>
<li><a href="#">Calvin</a></li>
<li><a href="#">Christina</a></li>
<li><a href="#">Cindy</a></li>
</ul>
<script>
function myfilter() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
function mydisplay() {
var x = document.getElementById("myInput").value;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
&#13;
答案 0 :(得分:1)
这取决于你说什么意思&#34; ...被重定向到另一个网页...&#34;:
如果您指的是URL(位置)重定向,那么应该:
答案 1 :(得分:1)
我认为你应该使用<form>
和GET方法将搜索到的文本传递给服务器端。这个表格应该自称。提交表单后(您必须拥有type = submit的<input>
元素),新页面将加载GET信息。然后,您可以编写任何代码来在服务器端或客户端过滤表。
答案 2 :(得分:1)
您可以将其存储在sessionStorage
中,该window.sessionStorage.setItem('foo', 'bar');
保留在同一浏览会话中同一域的网页之间。
所以,在一个页面上你去:
var value = window.sessionStorage.getItem('foo');
然后,在另一页上,你可以写:
value
变量"bar"
现在将包含ApplicationController
。