Remembering the previous search result

Hello all,

I have a database containing 5,000 items. The user enters a search term on the search page (input box) and a table with the results is displayed on the same page. The user can then click on the individual entries in the table to be taken to the full details on a dynamic page. A button on the dynamic page takes the user back to the search page, but the page is refreshed and their original search term is removed. Is there a way to remember their previous search term and automatically input it into the search input field? I think some form of wix-storage coding may be the answer but I’m not sure how to code for this.

My existing code is below. Any help would be very much appreciated.

Thanks so much,
Huw

import wixData from 'wix-data';

export function button1_click(event, $w) { 
wixData.query('searchBOXdatabase')
.ascending("imprint")
.contains('imprint', $w('#input1').value)
.or(wixData.query('searchBOXdatabase').contains('publisher', $w('#input1').value))
.or(wixData.query('searchBOXdatabase').contains('type', $w('#input1').value))
.limit(1000)
.find()
.then(res => { 
$w('#table1').rows = res.items;
$w('#table1').show();
});
}

$w.onReady(function () {
 $w("#table1").columns = [{
 "id": "col1",
 "dataPath": "imprint",
 "label": "Imprint/Platform",
 "width": 400,
 "visible": true,
 "type": "string",
 }, {
 "id": "col2",
 "dataPath": "publisher",
 "label": "Publisher/Vendor",
 "width": 400,
 "visible": true,
 "type": "string",
 }, {
 "id": "col3",
 "dataPath": "countryOfOrigin",
 "label": "Country",
 "width": 176,
 "visible": true,
 "type": "string",
  }, {
 "id": "col4",
 "dataPath": "type",
 "label": "Category",
 "width": 176,
 "visible": true,
 "type": "string",
 }];
});

import wixLocation from 'wix-location';

export function table1_rowSelect(event, $w) {
 let rowData = event.rowData;
 let rowIndex = event.rowIndex;
 const myRow = event.target.rows[rowIndex];
    wixLocation.to(`${myRow["link-searchBOXdatabase-imprint"]}`)
}

$w.onReady(function () {
 // Run a query that returns all the items in the collection
 retrieveAllItems()
      .then(results => {
 // Call the function that creates a list of unique titles
 const uniqueTitles = getUniqueTitles(results);   
 // Call the function that builds the options list from the unique titles
        $w("#dropdown1").options = buildOptions(uniqueTitles);    
      });
 // Builds an array from the "Title" field only from each item in 
 // the collection and then removes the duplicates
 function getUniqueTitles(items) {    
 // Use the map method to create the titlesOnly object containing all the titles from the query results
 const titlesOnly = items.map(item => item.type);   
 // Return an array with a list of unique titles
 return [...new Set(titlesOnly)];
  }
 // Creates an array of objects in the form {label: "label", value: "value"} from the array of titles
 function buildOptions(uniqueList) {   
 return uniqueList.map(curr => {
 // Use the map method to build the options list in the format {label:uniqueTitle, value:uniqueTitle}
 return {label:curr, value:curr}; 
        });
  }
});

async function retrieveAllItems(){

 let results = await  wixData.query("searchBOXdatabase")
   .ascending("type")        
 .limit(1000)
    .find();

 let allItems = results.items;

 while(results.hasNext()) {
    results = await results.next();
    allItems = allItems.concat(results.items);
  }
 return allItems;
}

export function dropdown1_change(event) {
wixData.query('searchBOXdatabase')
.ascending("imprint")
.contains('type', $w('#dropdown1').value)
.limit(1000)
.find()
.then(res => { 
$w('#table1').rows = res.items;
$w('#table1').show();
});
}

Hello Alexander,

yes i think it is possible to solve your problem with…
https://www.wix.com/corvid/reference/wix-storage.html

Just save your searchterm-value [ $w ( ‘#input1’ ). value )] and on load of the page get (load) it back from local. This should work.

Another possibility would be, to save your search-term (search-word) into a new database, and after refresh the site read it out back.

Thanks so much for your reply - much appreciated. My problem is that my coding is not good enough to work out where to add the wix-storage coding within my existing code. If anyone can help with that I would be really grateful.

Thanks so much,
h

Are you sure, that you wrote this code by yourself?
It is just a little code-snipet what you need to implement.
When i look at your coding, you should be able to solve your issue by yourself.

I will show you a starting point, where and how to start.
Replace your button1-click-event-code with mine…

export function button1_click(event, $w) { 
    storeLocal()        //<<<<<<<<<<<<<<--------------------------------------------------- this calls the function "storeLocal", which saves your searchterm / searchword, with the key "mySearchWord"
 let input = $w('#input1').value)
    wixData.query('searchBOXdatabase')
    .ascending("imprint")
    .contains('imprint', input)
    .or(wixData.query('searchBOXdatabase').contains('publisher', input))
    .or(wixData.query('searchBOXdatabase').contains('type', input))
    .limit(1000)
    .find()
    .then(res => { 
        $w('#table1').rows = res.items;
        $w('#table1').show();
    });
}

function storeLocal (parameter) {
 let valueToSave = $w('#input1').value)
 let key = "mySearchWord"
    local.setItem(key, valueToSave);
}

As you can see, now you are able to save your [search-word] local, to get it back later from local storage, you will need this code-snipet-here…

let value = local.getItem("key"); // "value"

you seted the key to -----> “mySearchWord”, so in your case it would be the following…

let value = local.getItem("mySearchWord");// "value"

So, when you press your “BACK-BUTTON” on the dynamic page to go back to your MAIN-PAGE, you have to read out the saved searchword from local.

Or better said, when main-page loads (onLoad) you just read out the saved data from local and start an automatic filtering with it.

Thanks so much for your help on this. The existing code has been written with a lot of help from the Wix forum and many hours studying video tutorials and similar coding. My coding skills are really poor, but I’m trying.

I’ve made the changes, but I’m getting a “parse error: unexpected token” error against the following line in the code:

let input = $w('#input1').value)

Do I also need to include the following code line at the top of the code?

import {local} from 'wix-storage';

Thanks so much,
h

Yes you need …

import {local} from 'wix-storage';

at the very top of the code.

And yes, i made a little mistake, it should be like this…

let input = $w('#input1').value

…there was a —> " ) " too much.

But this was just a part of code, further you will need to modify your “onReady-Code-Part” in your main-page-code.

Thanks very much - that removed the parse error.

Do you mean that I have to add the following code:

let value = local.getItem("mySearchWord");// "value"

To the existing onReady code (below) to pull back the stored search word and populate the table with the previous search results?

$w.onReady(function () {
  $w("#table1").columns = [{
 "id": "col1",
 "dataPath": "imprint",
 "label": "Imprint/Platform",
 "width": 400,
 "visible": true,
 "type": "string",
 }, {
 "id": "col2",
 "dataPath": "publisher",
 "label": "Publisher/Vendor",
 "width": 400,
 "visible": true,
 "type": "string",
 }, {
 "id": "col3",
 "dataPath": "countryOfOrigin",
 "label": "Country",
 "width": 176,
 "visible": true,
 "type": "string",
  }, {
 "id": "col4",
 "dataPath": "type",
 "label": "Category",
 "width": 176,
 "visible": true,
 "type": "string",
 }];
});


Thanks!
h

Yes, something like that.

Just think about your problem for a minute.

After you have clicked on your “BACK-Button” which is places on one of your dynamic pages, you will redirect to your main-site, right?

When your main-site loads you want what to do?
Of couse, you want to load your filter with the saved WORD in local.

The best way to do that on my opinion is, to create a function, wich will be called by the onReady-command. And this function then loads the filter with the local-saved-word.

I already gave you an example how to create this with your “button1” and the called function " storeLocal".

Now try to modify your onReady-Code on your main-page.

“When main-page loads do…(what shall happen”) ?

Thanks very much. I’ll try to figure this out tonight. I’ve added some code that populates the input box with the search word but the table itself is not populating with the search results. The search action is usually initiated by the user clicking a “search” button after entering their search term. I guess the code does not contain a trigger to make the search happen.

Brain hurting :slight_smile:

$w.onReady(function () {
 let value = local.getItem("mySearchWord");// "value"
  $w("#input1").value = value;
      $w("#table1").columns = [{
 "id": "col1",
 "dataPath": "imprint",
 "label": "Imprint/Platform",
 "width": 400,
 "visible": true,
 "type": "string",
 }, {
 "id": "col2",
 "dataPath": "publisher",
 "label": "Publisher/Vendor",
 "width": 400,
 "visible": true,
 "type": "string",
 }, {
 "id": "col3",
 "dataPath": "countryOfOrigin",
 "label": "Country",
 "width": 176,
 "visible": true,
 "type": "string",
  }, {
 "id": "col4",
 "dataPath": "type",
 "label": "Category",
 "width": 176,
 "visible": true,
 "type": "string",
 }];
});

You have to fire it up by onReady, not by a onClickEvent from a button :grin:

Now you have yout INPUT populated automatically, so you are ready to start the function X, wich will do the rest (which will simulation the on-BUTTON1-press) :wink:

REPLACE your onReady with mine…

$w.onReady(function () {
 let value = local.getItem("mySearchWord");// "value"
 set_myTable()
 start_myFilter()
});


function set_myTable  (parameter) {
  $w("#input1").value = value;
        $w("#table1").columns = [{
 "id": "col1",
 "dataPath": "imprint",
 "label": "Imprint/Platform",
 "width": 400,
 "visible": true,
 "type": "string",
    }, {
 "id": "col2",
 "dataPath": "publisher",
 "label": "Publisher/Vendor",
 "width": 400,
 "visible": true,
 "type": "string",
    }, {
 "id": "col3",
 "dataPath": "countryOfOrigin",
 "label": "Country",
 "width": 176,
 "visible": true,
 "type": "string",
    }, {
 "id": "col4",
 "dataPath": "type",
 "label": "Category",
 "width": 176,
 "visible": true,
 "type": "string",
 }];
}

function start_myFilter () {
 //..........HERE YOUR CODE ........
 //what shall happen now ????????????????????????????
}

…and complete the “start_myFilter”-function…

function start_myFilter () {
 //..........HERE YOUR CODE ........
 //what shall happen now ????????????????????????????
}

Try out this example:

Saved Search
Save search parameters for future searches.

Thanks very much for your help and patience on this one. I’ve been going around in circles for the past few hours trying to figure this out. I tried to build the filter but its not working. This is what I have so far:

function set_myTable  (parameter) {
 let value = local.getItem("mySearchWord");// "value"
   $w("#input1").value = value;
        $w("#table1").columns = [{
 "id": "col1",
 "dataPath": "imprint",
 "label": "Imprint/Platform",
 "width": 400,
 "visible": true,
 "type": "string",
    }, {
 "id": "col2",
 "dataPath": "publisher",
 "label": "Publisher/Vendor",
 "width": 400,
 "visible": true,
 "type": "string",
    }, {
 "id": "col3",
 "dataPath": "countryOfOrigin",
 "label": "Country",
 "width": 176,
 "visible": true,
 "type": "string",
    }, {
 "id": "col4",
 "dataPath": "type",
 "label": "Category",
 "width": 176,
 "visible": true,
 "type": "string",
 }];
}

function start_myFilter () {
let value = local.getItem("mySearchWord");// "value"
let filter = wixData.filter();
$w("#dataset1").setFilter(
filter.eq("mySearchWord", value)
}

Initially, the following code line triggered an error because “value” was not defined.

$w("#input1").value = value;

I added this line. Not sure if this is correct.

 let value = local.getItem("mySearchWord");// "value"

An error is now displayed due to the final “}” bracket in this code:

function start_myFilter () {
let value = local.getItem("mySearchWord");// "value"
let filter = wixData.filter();
$w("#dataset1").setFilter(
filter.eq("mySearchWord", value)
}

Am I heading in the right direction? Any help would be appreciated!

Hello again,

ok i will give you another EXAMPLE. For this example i will use my own Wix-Help-Page (where you can find a few nice learning examples, by the way), to demonstrate you how this “SAVE-FUNCTION” with local storage does function.

In my case (example), i want to save a value which i need for redirection, back to the right selected page, after pressing a back button (very similar to your own project :grin:)

What i have?

  1. I have stored several URLs in my database. Each URL open a dynamic created web-page.

  2. I have a table, which shows all the possible dynamic pages. By clicking on one of the table-values, you select one of this dynamic pages (with its current page-link).

  3. And i have a dataset, which is connected with this mentioned database and the table.

What i want to do?
I want that after choosing a tutorial (value) and pressing the “GO”-button, the table-value is saved in the local storage. This value is later needed, when going back to the tutorials-main-page.
After redirecting back to the main-page, i want that in my table the old value is selected again. (LOOK at the PIC when you go-back to tutorials-main-page, is this the pic, you have seen the last time, when clicking on “GO”-button) ?

For example you choose the “Switch Safe-Function”-tutorial and open it.
After going back to the tutorial-main-site (by clicking onto the red close-button), the value in the table should be the same as before (when you selected a tutorial).

Sorry for my English, i hope you understand the whole situation.

Ok, now you should know what i am talking about.

And here the CODE, which makes all this happen…

import wixLocation from 'wix-location';
import {local} from 'wix-storage';

$w.onReady(() => {console.log("GO")
 let mySavedValue = local.getItem("mySearchWord");   
 $w('#dataset1').setCurrentItemIndex(Number(mySavedValue))
});

function init() {
  $w('#table1').onRowSelect(event => {
 const currentRowIndex = event.rowIndex;
    console.log(currentRowIndex);
 const item = $w('#dataset1').getCurrentItem();
 const URL = item.url;
    console.log(URL);
 const myURL = item["link-tutorials-title"];
 const contentLink1 = item["link-tutorials-title"];
    console.log(myURL);
    $w('#BTNgo').link = myURL;
  })
}

export function BTNgo_click(event) {console.log($w('#dataset1').getCurrentItem().contentLink1)
    storeLocal()
 
 let visitCounter = $w('#dataset1').getCurrentItem().views

 if (visitCounter ==0) {visitCounter = 1}
 else {visitCounter = visitCounter+1}

    $w("#dataset1").setFieldValue("views", visitCounter)
    $w("#dataset1").save()
 
    .then(()=>{
        wixLocation.to($w('#dataset1').getCurrentItem().contentLink1)
        console.log(visitCounter)
    })
}

//This will save needed value local
function storeLocal () {console.log($w('#dataset1').getCurrentItemIndex())
 let valueToSave = $w('#dataset1').getCurrentItemIndex()
 let key = "mySearchWord"
    local.setItem(key, valueToSave);
}

when i reduce the code for your needs (for better understanding), it looks like this… (the whole action in a compressed code-view)

import wixLocation from 'wix-location';
import {local} from 'wix-storage';

$w.onReady(() => {
 let mySavedValue = local.getItem("mySearchWord");   
    $w('#dataset1').setCurrentItemIndex(Number(mySavedValue))
});

export function BTNgo_click(event) {
    storeLocal();
}

function storeLocal () {
 let valueToSave = $w('#dataset1').getCurrentItemIndex();
 let key = "mySearchWord"
    local.setItem(key, valueToSave);
}

And here is the mentioned site for this example…
https://russian-dima.wixsite.com/meinewebsite