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.

<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

Detecting the Escape key when the browser's search bar is open - a step-by-step guide

One feature on my website is an editor window that can be closed using the Escape key. The functionality is implemented in JavaScript: $(document).keyup( function(e) { // Closing editor window with ESCAPE KEY if(e.which == 27) { // Clic ...

javascriptjquery

Guide to showcasing console output on a Web Server

Apologies if this question is not the most suitable for this platform. I recently set up Pure-FTPd service on a CentOS server. To check current connections, I use the command pure-ftpwho, which gives me the following output: +------+---------+-------+---- ...

javascriptphpjquery

What is the best way to smoothly move a fixed-size div from one container to another during a re-render process?

Introduction Anticipated change Similar, though not identical to my scenario: Situation 0: Imagine you have a container (chessboard with divs for game pieces) and a dead-pieces-view (container for defeated pieces). The positioning of these containers i ...

javascripthtmlcssreactjscss-transitions

Vue component does not display FabricJS image

Currently, I am facing an issue where I want to manipulate images on a canvas using FabricJS inside a VueJS app. In the view component, there is a prop called background which I pass in and then use fabric.Image.fromURL() to load it onto the canvas. Howeve ...

javascriptvue.jsfabricjs

Combining two-digit values

As a newcomer to JavaScript, I've been working on creating a basic calculator to practice my skills. However, I've run into an issue. When entering a double-digit number, the calculator is adding the digits together instead of treating them as se ...

javascriptvariables

Implementing a Scroll Bar within a Stack Component in Material UI

I've developed a component and now I'm looking to enable scrolling when it expands beyond the screen width <Stack direction="row"> <Stack gap={1} overflow="auto"> {fields.map((el, i) => ( ...

cssreactjsnext.jsmaterial-ui

Learn how to utilize jQuery and Anything Slider to showcase the identification of the current slide in your web presentation

I am attempting to dynamically display the ID of the current slide in another div when the slide changes. Here is a snippet of the code I have been working on: $(function(){ $('#slider').anythingSlider({ onSlideInit: function(e,slider){ ...

jqueryanythingslider

Giving identification to a pair of elements located within the same column

Struggling with assigning IDs to two elements in a single column - a dropdown and a text element. Managed it in the first scenario, but encountering issues in the second one. Seeking assistance on this matter. Scenario 1: <td> <sele ...

javascriptjqueryhtmlcss

Is it possible to use mapDispatchToProps in Redux without mapStateToProps?

As I dissect Redux' todo example to gain a deeper understanding, I came across the concept of mapDispatchToProps. This feature allows you to map dispatch actions as props, which led me to consider rewriting addTodo.js by incorporating mapDispatchToPro ...

javascriptreactjsreduxreact-redux

What is the best way to switch between different styles for each paragraph using CSS?

I attempted to use the :nth-of-type selector, but I am uncertain if it is feasible or if it accomplishes what I desire. My goal is to create an alternating style: two paragraphs aligned on the left, followed by two on the right, and so forth, regardless of ...

htmlcss

When using Next.js revalidate, an error may occur stating: "There are keys that require relocation: revalidate

I have been attempting to utilize the revalidate function in my code by following the example provided by Vercel. However, I keep encountering an error. Here is the snippet of code that I am currently using: export async function getServerSideProps() { c ...

javascriptmongodbnext.js

Guide on utilizing substring string functions in the updated version of Selenium IDE

I am facing a challenge with extracting the word "Automation" from a given string "Welcome to the Automation World" using Selenium IDE Record and Play feature. I have tried using the execute script command, but it doesn't seem to be working as expecte ...

javascriptseleniumselenium-ide

Adjust the space between spans by utilizing the margin

There are two spans (although there could be many more) on this web page that I need to adjust the distance between. I tried using the margin-bottom attribute, but it doesn't seem to have any effect. The spans remain in their original positions, which ...

cssxhtmllayoutmarginhtml

Unpacking JSON Objects in Typescript: Working with Private Variables

I have a TypeScript model object called user export class User { constructor( private _name: string, private _email: string ) {} public get name():string { return this._name; } public set name(value:string) { this._name = value; } g ...

javascriptjsontypescriptlocal-storage

Tips for resolving rendering page issues in an express app

My application is a straightforward blog platform that showcases a schema for the title, entry, and date of each blog post. There is also an edit/delete feature that is currently under development. When attempting to use the edit/delete button on a selecte ...

javascriptnode.jsmongodbexpresspug

What is the best way to eliminate the outer gutter in a 3-column grid using Bootstrap 3?

Check out this fiddle for more information. http://jsfiddle.net/Nb5C7/ I am curious about the blue gutter on the ends, which seems to be caused by auto margin. How can I get rid of it? In another example provided here , I was able to remove the gutter u ...

csstwitter-bootstrap-3

What can cause my function to return true on the server but false on the client side in Meteor.js?

I am facing an issue with the hasCompleted function which returns true or false on the server side: Smaples.helpers({ hasCompleted(userId) { // … switch (this.frequency) { case Frequency.ONE_TIME:{ return measures.fetch().every(mea ...

javascriptreactjsmeteormeteor-react

In order to activate the input switch in Next.Js, it is necessary to initiate a

Currently, I am working on implementing an on-off switch in Next.Js. To seek assistance, I referred to this helpful video tutorial: https://www.youtube.com/watch?v=1W3mAtAT7os&t=740s However, a recurring issue I face is that whenever the page reloads, ...

javascriptreactjsreact-nativenext.js

Tips for importing JSON data from a file into a jQuery variable?

I have a JSON document that contains: { "data": [{ "red": "#f00", "green": "#0f0", "blue": "#00f", "cyan": "#0ff", "magenta": "#f0f", "yellow": "#ff0", "black": "#000" }] } My goal is to ret ...

javascriptjqueryjson

Unable to turn off X-Powered-By: Express

After attempting to use app.disable("x-powered-by"); without success, I came across some helpful posts on the topic: how to remove X-Powered-By in ExpressJS Can't get rid of header X-Powered-By:Express I am using "express": "^4.16.4" as backend a ...

javascriptnode.jsreactjsexpress