时间戳

首页 > 解决方案 > 我将自动完成设置为关闭 - 我的页面未正确保存。如果页面中的过滤结果消失，则无法前进/后退或刷新

javascript - 我将自动完成设置为关闭 - 我的页面未正确保存。如果页面中的过滤结果消失，则无法前进/后退或刷新

问题描述

将自动完成设置为关闭当我单击浏览器中的“返回”按钮或“刷新/重新加载”按钮时，我的搜索/过滤结果会消失。如何在返回和第四次导航到页面或刷新/重新加载时让结果页面与关键字保持一致。我是否需要将我的搜索词和页面分配给一个 href 地址栏 例如：mysite.com/?search=words 和 historySession 涉及的概念？- 我承认我的JavaScript知识有限，但我知道这个问题肯定可以解决

JS

<body>
<script>
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);
if(document.getElementById('myInput').value.length >0){
ContactsearchFX();
}
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;
} 
});

CSS

</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://code.jquery.com/jquery-3.3.1.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>
<head>
<body>
<div class="input-wrap">
<label>
Search 
<input id="myInput" type="text" spellcheck="false"
   placeholder="Search Titles"/>
<div class="hintsWrap">
<p id="noMatches"></p>
<p class="hints">
Hints: type "Title1", "Title2", "Title3"...
</p>
</div>
</label>
</div>
<br />
<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 />

        <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 />

标签： javascripthtmljquerycss

解决方案

推荐阅读