javascript - 是否可以在返回页面时仍然显示结果？
问题描述
我有一个过滤表/（搜索）页面，只有当我浏览一些页面并返回到有问题的过滤表/（搜索）页面时，结果才会消失
我真的不想重新加载页面。我只是想回到页面，发现页面没有任何变化。我只是想按原样返回页面。如我所见，如果输入框中存在关键字，则仍应显示结果。
请记住，这不是一个搜索页面，而是一个过滤表结果页面
我可以将字符串存储在 中localStorage，但它确实会减慢速度。考虑到我只对结果使用表格过滤器时，必须有一个更简单的解决方案。某种小触发器似乎是有道理的，但这就是我难以弄清楚的问题
jsfiddle.net/7BUmG/2 看到另一个用户的这个演示与我正在做的事情有相似之处，但请注意，当您离开页面并返回结果时仍然存在！- 这就是我的目标
我想知道是否有人知道简单的插件或一些可能可用的演示代码。如果有人能指出这一点，那就太棒了！
var input, table, rows, noMatches, tr, markInstance;
$(document).ready(function init() {
input = document.getElementById('myInput');
noMatches = document.getElementById('noMatches');
table = document.querySelectorAll('#myTable table tr:first-child');
rows = document.querySelectorAll('#myTable table tr');
markInstance = new Mark(table);
input.addEventListener('keyup', _.debounce(ContactsearchFX, 250));
});
function ContactsearchFX() {
resetContent();
markInstance.unmark({ done: highlightMatches });
}
function resetContent() {
$('.noMatchErrorText').remove();
//Remove this line to have a log of searches
//noMatches.textContent = '';
rows.forEach(function(row) {
$(row).removeClass('show');
});
}
function highlightMatches() {
markInstance.mark(input.value, {
each: showRow,
noMatch: onNoMatches,
exclude: ['.nonsearch']
})
}
function showRow(element) {
//alert(element);
$(element).parents('tr').addClass('show'); $(element).parents('tr').siblings('tr').addClass('show');
//Parents incase of several nestings
}
function onNoMatches(text) {
$('#myInput').after('<p class="noMatchErrorText">No records match: "' + text + '"</p>');
}
/* Prevents Return/Enter key from doing anything */
$(document).on('submit', 'form', function(e){
/* on form submit find the trigger */
if( $(e.delegateTarget.activeElement).not('input, textarea').length == 0 ){
/* if the trigger is not between selectors list, return super false */
e.preventDefault();
return false;
}
});
/* Prevents Return/Enter key from doing anything */
.input-wrap {
margin-bottom: 12px;
}
#myInput:invalid ~ .hints {
display: block;
}
#noMatches:empty, #noMatches:empty + .hints {
display: none;
}
.style1 tr {
display: none;
}
.style1 .show {
display: table-row;
}
#myTable table tr:first-child td mark {
background: orange;
font-weight: bold;
color: black;
}
mark {
background: initial;
} .style1 {
text-align: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1
/mark.min.js"></script>
<div class="input-wrap">
<label>
Search
<input id="myInput" type="text" required
placeholder="Search Titles" />
</label>
</div>
<div class="hintsWrap">
<p id="noMatches"></p>
<p class="hints">
Hints: type "Title1", "Title2", "Title3"...
</p>
</div>
<br />
<br />
<br />
<table id="myTable" style="width: 100%" class="style1">
<tr>
<td>
<br />
<br />
<table style="width: 100%">
<tr>
<td>
<table style="width: 100%">
<tr>
<th class="style1">Type</th>
<td>type1</td>
</tr>
<tr>
<th class="style1">Title</th>
<td>title1</td>
</tr>
<tr>
<th class="style1">Description</th>
<td>description1</td>
</tr>
<tr>
<th class="style1">Date</th>
<td>date1</td>
</tr>
</table>
</td>
</tr>
</table>
<br />
<br />
<table style="width: 100%">
<tr>
<th class="style1">Type</th>
<td>type2</td>
</tr>
<tr>
<th class="style1">Title</th>
<td>title2</td>
</tr>
<tr>
<th class="style1">Description</th>
<td>description2</td>
</tr>
<tr>
<th class="style1">Date</th>
<td>date2</td>
</tr>
</table>
<br />
<br />
<table style="width: 100%">
<tr>
<th class="style1">Type</th>
<td>type3</td>
</tr>
<tr>
<th class="style1">Title</th>
<td>title3</td>
</tr>
<tr>
<th class="style1">Description</th>
<td>description3</td>
</tr>
<tr>
<th class="style1">Date</th>
<td>date3</td>
</tr>
</table>
<br />
<br />
<br />
<br />
<br />
</td>
</tr>
</table>
解决方案
如果不存放在某个地方，它看起来是不可能的，但我有一个奇怪的想法，你可以试试。
这是代码，我添加了 2 个新功能，一个在您在搜索框中输入时更改 url。（这在 jsfiddle 上不起作用，所以我将一个示例上传到我的域，以便您检查它是否适合您）。如果存在于搜索框中，则第二个函数获取 url。
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.min.js"></script>
<div class="input-wrap">
<label>
Search
<input onkeydown="inputchange(this)" id="myInput" type="text" required placeholder="Search Titles" />
</label>
</div>
<div class="hintsWrap">
<p id="noMatches"></p>
<p class="hints">
Hints: type "Title1", "Title2", "Title3"...
</p>
</div>
<br />
<br />
<br />
<table id="myTable" style="width: 100%" class="style1">
<tr>
<td>
<br />
<br />
<table style="width: 100%">
<tr>
<td>
<table style="width: 100%">
<tr>
<th class="style1">Type</th>
<td>type1</td>
</tr>
<tr>
<th class="style1">Title</th>
<td>title1</td>
</tr>
<tr>
<th class="style1">Description</th>
<td>description1</td>
</tr>
<tr>
<th class="style1">Date</th>
<td>date1</td>
</tr>
</table>
</td>
</tr>
</table>
<br />
<br />
<table style="width: 100%">
<tr>
<th class="style1">Type</th>
<td>type2</td>
</tr>
<tr>
<th class="style1">Title</th>
<td>title2</td>
</tr>
<tr>
<th class="style1">Description</th>
<td>description2</td>
</tr>
<tr>
<th class="style1">Date</th>
<td>date2</td>
</tr>
</table>
<br />
<br />
<table style="width: 100%">
<tr>
<th class="style1">Type</th>
<td>type3</td>
</tr>
<tr>
<th class="style1">Title</th>
<td>title3</td>
</tr>
<tr>
<th class="style1">Description</th>
<td>description3</td>
</tr>
<tr>
<th class="style1">Date</th>
<td>date3</td>
</tr>
</table>
<br />
<br />
<br />
<br />
<br />
</td>
</tr>
</table>
</html>
<script>
var input, table, rows, noMatches, tr, markInstance;
$(document).ready(function init() {
input = document.getElementById('myInput');
var q = window.location.href.split("=");
if(q[1]){
input.value=q[1];
}
noMatches = document.getElementById('noMatches');
table = document.querySelectorAll('#myTable table tr:first-child');
rows = document.querySelectorAll('#myTable table tr');
markInstance = new Mark(table);
input.addEventListener('keyup', _.debounce(ContactsearchFX, 250));
});
function ContactsearchFX() {
resetContent();
markInstance.unmark({
done: highlightMatches
});
}
function resetContent() {
$('.noMatchErrorText').remove();
//Remove this line to have a log of searches
//noMatches.textContent = '';
rows.forEach(function (row) {
$(row).removeClass('show');
});
}
function highlightMatches() {
markInstance.mark(input.value, {
each: showRow,
noMatch: onNoMatches,
exclude: ['.nonsearch']
})
}
function showRow(element) {
//alert(element);
$(element).parents('tr').addClass('show');
$(element).parents('tr').siblings('tr').addClass('show');
//Parents incase of several nestings
}
function onNoMatches(text) {
$('#myInput').after('<p class="noMatchErrorText">No records match: "' + text + '"</p>');
}
/* Prevents Return/Enter key from doing anything */
$(document).on('submit', 'form', function (e) {
/* on form submit find the trigger */
if ($(e.delegateTarget.activeElement).not('input, textarea').length == 0) {
/* if the trigger is not between selectors list, return super false */
e.preventDefault();
return false;
}
});
function inputchange(x) {
const addTourl = x.value;
console.log("addTourl", addTourl);
history.pushState("", "Title", "?q="+addTourl);
}
</script>
<style>
.input-wrap {
margin-bottom: 12px;
}
#myInput:invalid~.hints {
display: block;
}
#noMatches:empty,
#noMatches:empty+.hints {
display: none;
}
.style1 tr {
display: none;
}
.style1 .show {
display: table-row;
}
#myTable table tr:first-child td mark {
background: orange;
font-weight: bold;
color: black;
}
mark {
background: initial;
}
.style1 {
text-align: left;
}
</style>
新版本：
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.min.js"></script>
<div class="input-wrap">
<label>
Search
<input oninput="inputchange(this)" id="myInput" type="text" required placeholder="Search Titles" />
</label>
</div>
<div class="hintsWrap">
<p id="noMatches"></p>
<p class="hints">
Hints: type "Title1", "Title2", "Title3"...
</p>
</div>
<br />
<br />
<br />
<table id="myTable" style="width: 100%" class="style1">
<tr>
<td>
<br />
<br />
<table style="width: 100%">
<tr>
<td>
<table style="width: 100%">
<tr>
<th class="style1">Type</th>
<td>type1</td>
</tr>
<tr>
<th class="style1">Title</th>
<td>title1</td>
</tr>
<tr>
<th class="style1">Description</th>
<td>description1</td>
</tr>
<tr>
<th class="style1">Date</th>
<td>date1</td>
</tr>
</table>
</td>
</tr>
</table>
<br />
<br />
<table style="width: 100%">
<tr>
<th class="style1">Type</th>
<td>type2</td>
</tr>
<tr>
<th class="style1">Title</th>
<td>title2</td>
</tr>
<tr>
<th class="style1">Description</th>
<td>description2</td>
</tr>
<tr>
<th class="style1">Date</th>
<td>date2</td>
</tr>
</table>
<br />
<br />
<table style="width: 100%">
<tr>
<th class="style1">Type</th>
<td>type3</td>
</tr>
<tr>
<th class="style1">Title</th>
<td>title3</td>
</tr>
<tr>
<th class="style1">Description</th>
<td>description3</td>
</tr>
<tr>
<th class="style1">Date</th>
<td>date3</td>
</tr>
</table>
<br />
<br />
<br />
<br />
<br />
</td>
</tr>
</table>
</html>
<script>
var input, table, rows, noMatches, tr, markInstance;
$(document).ready(function init() {
input1 = document.getElementById('myInput');
noMatches = document.getElementById('noMatches');
table = document.querySelectorAll('#myTable table tr:first-child');
rows = document.querySelectorAll('#myTable table tr');
markInstance = new Mark(table);
input1.addEventListener('input', ContactsearchFX, true);
var q = window.location.href.split("=");
if(q[1]){
input1.value=q[1];
const event = new MouseEvent('input', {
view: window,
bubbles: true,
cancelable: true
});
const cancelled = !input1.dispatchEvent(event);
}
});
function ContactsearchFX() {
resetContent();
markInstance.unmark({
done: highlightMatches
});
}
function resetContent() {
$('.noMatchErrorText').remove();
//Remove this line to have a log of searches
//noMatches.textContent = '';
rows.forEach(function (row) {
$(row).removeClass('show');
});
}
function highlightMatches() {
markInstance.mark(input1.value, {
each: showRow,
noMatch: onNoMatches,
exclude: ['.nonsearch']
})
}
function showRow(element) {
//alert(element);
$(element).parents('tr').addClass('show');
$(element).parents('tr').siblings('tr').addClass('show');
//Parents incase of several nestings
}
function onNoMatches(text) {
$('#myInput').after('<p class="noMatchErrorText">No records match: "' + text + '"</p>');
}
/* Prevents Return/Enter key from doing anything */
$(document).on('submit', 'form', function (e) {
/* on form submit find the trigger */
if ($(e.delegateTarget.activeElement).not('input, textarea').length == 0) {
/* if the trigger is not between selectors list, return super false */
e.preventDefault();
return false;
}
});
function inputchange(x) {
const addTourl = x.value;
console.log("addTourl", addTourl);
history.pushState("", "Title", "?q="+addTourl);
}
</script>
<style>
.input-wrap {
margin-bottom: 12px;
}
#myInput:invalid~.hints {
display: block;
}
#noMatches:empty,
#noMatches:empty+.hints {
display: none;
}
.style1 tr {
display: none;
}
.style1 .show {
display: table-row;
}
#myTable table tr:first-child td mark {
background: orange;
font-weight: bold;
color: black;
}
mark {
background: initial;
}
.style1 {
text-align: left;
}
</style>
推荐阅读
- c# - 网关中的 ASP.NET 核心 Jwt 身份验证
- windows - Windows 7 中启用的桌面幻灯片图像存储在哪个文件夹中？
- groovy - 关于 + 和 groovy 中的 is 运算符的问题
- c# - 将鼠标单击坐标存储到c#中的数组的问题
- amazon-web-services - TestDriven.io 教程“AWS 上的可扩展 FastAPI 应用程序”：添加 Docker CI/CD 映像失败，退出代码为 28
- python - 获取功能以了解工人何时因工作量不足而不得不离开他的工作站
- javascript - 如何将回调传递给类中的init函数
- android - 无法将 String 转换为 jsonArray
- node.js - ng 无法识别并且 npm run 找不到 package.json
- google-cloud-platform - Google Cloud Endpoints Developer Portal 删除获取 API 密钥