Can the outcomes be showcased again upon revisiting a page?

Whenever I navigate away from and return to my filter table/search page, the results vanish. I'm looking for a way to preserve the results without reloading the page. Essentially, I want the page to remain as it was originally, with the search results intact whenever I come back to it.

This page functions more like a filter table results page than a traditional search page. Storing the search string in localStorage could work but might slow down the process. Is there a simpler solution that can maintain the search results specifically for a table filter?

I feel like a small trigger mechanism would be ideal in this scenario, but identifying the right approach is proving to be a challenge.

If you check out this demo on jsfiddle.net/7BUmG/2, you'll see a similar situation where the search results persist even after navigating away from and returning to the page - that's exactly what I'm striving for here.

Can anyone recommend a straightforward plugin or provide some sample code to address this issue? Any guidance in this regard would be greatly appreciated!

javascripthtmljquerycss

Answer №1

it seems impossible to achieve without storing somewhere, but I have a unique idea that you could experiment with.

Here is the revised code where I've added 2 new functions: one that changes the URL when typing in the search box (since this might not function on jsfiddle, I've provided an example link on my domain for testing purposes), and the second function retrieves the URL if it exists in the search box.

https://i.sstatic.net/4qj6R.jpg

<html>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e4888b8085978ca4d0cad5d3cad5d5">[email protected]</a>/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() {
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();

rows.forEach(function (row) {
$(row).removeClass('show');
});
}

function highlightMatches() {
markInstance.mark(input1.value, {
each: showRow,
noMatch: onNoMatches,
exclude: ['.nonsearch']
})
}



function showRow(element) {
$(element).parents('tr').addClass('show');
$(element).parents('tr').siblings('tr').addClass('show');
}


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) {
if ($(e.delegateTarget.activeElement).not('input, textarea').length == 0) {

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>

new version:

<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();


rows.forEach(function (row) {
$(row).removeClass('show');
});
}

function highlightMatches() {
markInstance.mark(input1.value, {
each: showRow,
noMatch: onNoMatches,
exclude: ['.nonsearch']
})
}

function showRow(element) {
$(element).parents('tr').addClass('show');
$(element).parents('tr').siblings('tr').addClass('show');
}

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) {
if ($(e.delegateTarget.activeElement).not('input, textarea').length == 0) {

 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Discovering necessary information by iterating through JSON

Being new to vue js, my goal is to loop through the provided JSON data and check if the required data is present within the file. Here is a snippet of the JSON: [ { "id": "text-5", "widget": "hello", "params": { "0": "section-right", ...

javascriptjson

Comparison of the "Proposed Recommendation" versus the "Candidate Recommendation"

In a recent piece about HTML5, it was mentioned that the Proposed Recommendation date is set for 2022, while the Candidate Recommendation date is from 2012. I'm curious to understand the distinction between the "Proposed Recommendation" and the "Cand ...

htmlw3c

The premature reveal of the back side in the Kendo UI flip effect on Internet Explorer

Currently, I am in the process of creating a BI dashboard for a business application using JavaScript Kendo UI version v2014.1.416. Unfortunately, I have encountered an issue with certain visuals while testing on IE11. I must mention that due to practical ...

javascriptinternet-explorerkendo-uieffectflip

What's the Purpose of Using an Arrow Function Instead of Directly Returning a Value in a React Event Handler?

After skimming through various textbooks and blog posts, I've noticed that many explanations on event handlers in React are quite vague... For example, when instructed to write, onChange = {() => setValue(someValue)} onChange = {() => this.pro ...

javascriptreactjsreact-nativeevent-handling

Extract from Document File

After receiving a PDF through an Angular Http request from an external API with Content Type: application/pdf, I need to convert it into a Blob object. However, the conventional methods like let blobFile = new Blob(result) or let blobFile = new Blob([resul ...

javascripthtmlangulartypescriptblob

React component's useEffect runs twice when missing dependencies

Hi there, I'm currently facing an issue with the useEffect hook in my code. I have set it without any dependencies because I only want it to run once. The problem arises when the useEffect in the Profiles.js component runs twice, even though I am usin ...

javascriptreactjs

Insert a new item into an existing list using jQuery

I am looking to enhance user experience by allowing them to easily add multiple sets of inputs with just one click. I have been experimenting with jQuery in order to dynamically insert a new row of input fields after the initial set. My current approach i ...

javascriptjqueryhtml

The issue of Three.js SkinnedMesh jittering arises when it is distant from the scene's root (0,0,0)

In my current project, I am developing a third-person RPG style game using Three.js and Blender. The terrain in the game world is tiled and loops endlessly in all directions, triggered when the player object approaches defined edges along the z or x-axis. ...

javascriptiosthree.js

Developing a personalized logging service in NestJs: capturing logs without directly outputting them

I am currently working on developing a NestJs service that will enhance a Logger. However, I am facing issues with achieving the desired output (e.g., super.warn(); see below for more details). I have followed a tutorial from the nestjs site, but unfortuna ...

javascriptnode.jsnestjs

What is the best way to save the value returned by a foreach loop into an array and then send two responses

After attempting to store the doctor details in an array and display the appointment and doctor Name Value response, I encountered a problem. The Appointment value is successfully achieved, but the doctor Name Value appears empty even though it shows in th ...

javascriptreactjsmongodbreact-nativeexpress

Node(Meteor) experiencing a memory leak due to setTimeout

I have encountered an unusual memory leak associated with the use of setTimeout. Every 15 seconds, I execute the following code using an async function that returns an array of promises (Promise.all). The code is supposed to run again 15 seconds after all ...

javascriptnode.jsmeteormemory-leakssettimeout

Animated smooth updates in d3 line graphs are the key to creating dynamic and

I'm attempting to modify an example of Animated Line Graphs from: http://bl.ocks.org/benjchristensen/1148374 <div id="graph1" class="aGraph" style="width:600px; height:60px;"></div> <script> function draw(id, width, height, upd ...

javascriptanimationd3.js

jQuery alert: A TypeError was caught stating that the object being referred to does not have the 'dialog' method available

For a few days now, I have been tirelessly searching for a solution to this issue and it has caused me quite a bit of stress. My problem lies in echoing a JQuery popup script within php: echo '<link rel="stylesheet" href="http://code.jquery.c ...

phpjavascript

What is the correct way to load a column of images without affecting the readability of the text alongside them? (see image below)

https://i.stack.imgur.com/rBL50.png Whenever my page loads, there is a card with a vertical list of images. Due to the loading time of the images, the text appears first and gets squished as shown in the provided screenshot. Is there a way for the text to ...

phphtmlcss

As the window width decreases, the image is breaking free from its container

When the window is in full screen, such as lg or md, the content fits within the container. However, when I resize the window to be smaller, the image overflows outside of the container. This layout was created using Bootstrap 3. Below is the HTML and CSS ...

htmlcsstwitter-bootstrap

Using the 'useMediaQuery' function from Material UI in a class component

Currently experimenting with Material UI's useMediaQuery feature to adjust the styles of a specific component, in this case the Button component. The objective is to eliminate the outline surrounding the button when the screen size decreases. The atte ...

javascriptreactjsbootstrap-4material-uiconditional-statements

The Express middleware type cannot be assigned as expected

I'm encountering an error where my first middleware is being red underlined. I can't figure out why it's only happening to the first one. Can anyone provide some guidance on this issue? I'm still quite new to TypeScript. Did I overloo ...

javascripttypescriptexpress

Is there a proper method for refreshing a DataTable? Encountering issues such as "fnDraw method not found" and "oFeatures property cannot be read."

Upon inheriting the code snippet below: // Display or hide table rows based on checkbox state $("table.data#report-table .warning").toggle($("#warning_checkbox").is(":checked")); $("#warning_checkbox").click(function() { $("table.data#report-tab ...

jquerydatatables

Launch the desired div in a fancybox from a separate webpage

i have a table with links to another html doc like this <div id="gallery_box"> <ul> <li> <a href="http://www.geestkracht.com" target="_blank"><img src="images/gallery/Geestkracht.jpg" alt="G ...

jqueryajaxfancybox

Utilize React-markdown to interpret subscript text in markdown format

I tried to create subscript text in an .md file using the following syntax: x_i x~i~ Unfortunately, react-markdown did not interpret this as subscript. After some research, I discovered the package remark-sub-super and implemented it with the plugin ...

javascriptnode.jsreactjsnext.jsreact-markdown