Persistent search results

Ask the community
, ,
1

Hello. When users perform a search on my site the results are displayed in a repeater. Users then click on items and are taken to new (dynamic) pages. I’d like to know how to create a button on those dynamic pages that will return users to the (stored) search results. Please help!

2

It depends on how may results you have. If you have only few, you can save the to the browser cache and retrieve then once the user is back. If you have many results, you may prefer storing the search term and run an automatic search one the user is back.
See:
https://www.wix.com/corvid/reference/wix-storage.html

3

Thanks so much. Will try this.

4

Here is my page’s code. My questions is: what do I have to add to get it to perform any search once more on load to give the illusion of persistent search results when users return to the page? So many thanks in advance…

import wixData from ‘wix-data’;
import wixLocation from ‘wix-location’;
import { local } from ‘wix-storage’;

const linkField = “link-RefugeeVoices-title”;

$w.onReady( function () {
$w(“#dataset1”).onReady(() => {
const numberOfItems = $w(“#dataset1”).getTotalCount();

    $w("#dataset1").getItems(0, numberOfItems) 
        .then((result) => {

const dynamicPageURLs = result.items.map(item => item[linkField]);
local.setItem(‘dynamicPageURLs’, dynamicPageURLs);
})
. catch ((err) => {
console.log(err.code, err.message);
});
});
$w(“#repeaterResults”).onItemReady(($w, dataItem, index) => {
let linkToDynamicPage = dataItem[“link-RefugeeVoices-title”];
$w(‘#buttonResults’).onClick(() => {
wixLocation.to(linkToDynamicPage);
});
});
$w(‘#repeaterResults’).onItemReady(($w, itemData, index) => {
$w(“#buttonResults”).label = itemData.title;
});

});

export function button4_click(event, $w) {
let searchValue = $w(‘#input2’).value;
wixData.query(‘1RefugeeVoices’)
.contains(‘interviewSummary’, $w(‘#input2’).value)
.or(wixData.query(‘1RefugeeVoices’).contains(‘title’, $w(‘#input2’).value))
.or(wixData.query(‘1RefugeeVoices’).contains(‘placeOfBirth’, $w(‘#input2’).value))
.find()
.then(res => {
$w(‘#repeaterResults’).data = res.items;
$w(“#repeaterAB”).hide();
$w(“#repeaterResults”).show();
});
}

export function buttonDOBold_click(event) {
$w(‘#buttonDOBold’).disable()
$w(‘#buttonLastName’).enable()
$w(‘#buttonDOByoung’).enable()
$w(‘#buttonORDERold’).enable()
$w(‘#buttonORDERrecent’).enable()
$w(“#dataset1”).setSort( wixData.sort()
.ascending(“birthdate”)
);
}

export function buttonLastName_click(event) {
$w(‘#buttonLastName’).disable()
$w(‘#buttonDOBold’).enable()
$w(‘#buttonDOByoung’).enable()
$w(‘#buttonORDERold’).enable()
$w(‘#buttonORDERrecent’).enable()
$w(“#dataset1”).setSort( wixData.sort()
.ascending(“name”)
);
}

export function buttonDOByoung_click(event) {
$w(‘#buttonDOByoung’).disable()
$w(‘#buttonDOBold’).enable()
$w(‘#buttonLastName’).enable()
$w(‘#buttonORDERold’).enable()
$w(‘#buttonORDERrecent’).enable()
$w(“#dataset1”).setSort( wixData.sort()
.descending(“birthdate”)
);
}

export function buttonORDERold_click(event) {
$w(‘#buttonORDERold’).disable()
$w(‘#buttonDOBold’).enable()
$w(‘#buttonLastName’).enable()
$w(‘#buttonDOByoung’).enable()
$w(‘#buttonORDERrecent’).enable()
$w(“#dataset1”).setSort( wixData.sort()
.ascending(“number”)
);
}

export function buttonORDERrecent_click(event) {
$w(‘#buttonORDERrecent’).disable()
$w(‘#buttonDOBold’).enable()
$w(‘#buttonLastName’).enable()
$w(‘#buttonDOByoung’).enable()
$w(‘#buttonORDERold’).enable()
$w(“#dataset1”).setSort( wixData.sort()
.descending(“number”)
);
}

5

You can do something like this:


import {session} from 'wix-storage';
let searchValue;
function runSearch(value){
wixData.query('1RefugeeVoices')
        .contains('interviewSummary', value)
        .or(wixData.query('1RefugeeVoices').contains('title', $w('#input2').value))
        .or(wixData.query('1RefugeeVoices').contains('placeOfBirth', $w('#input2').value))
        .find()
        .then(res => {
            $w('#repeaterResults').data = res.items;
            $w("#repeaterAB").hide();
            $w("#repeaterResults").show();
        });
}
$w.onReady(() => {
        searchValue = local.getItem("searchValue");
        if( typeof searchValue === "string"){
        $w('#input2').value = searchValue;
        runSearch(searchValue);
        }
}
export function button4_click(event) {
        searchValue = $w('#input2').value;
        runSearch(searchValue);
        session.setItem("searchValue", searchValue);
}
6

You are amazing! Thanks so much.

I still get an error, I’m sure it’s my fault:

1440×900 269 KB

Here’s my new code. How have I messed up?

import wixData from ‘wix-data’;
import wixLocation from ‘wix-location’;
import {local, memory, session} from ‘wix-storage’;

const linkField = “link-RefugeeVoices-title”;
let searchValue;
function runSearch(value){
wixData.query(‘1RefugeeVoices’)
.contains(‘interviewSummary’, value)
.or(wixData.query(‘1RefugeeVoices’).contains(‘title’, $w(‘#input2’).value))
.or(wixData.query(‘1RefugeeVoices’).contains(‘placeOfBirth’, $w(‘#input2’).value))
.find()
.then(res => {
$w(‘#repeaterResults’).data = res.items;
$w(“#repeaterAB”).hide();
$w(“#repeaterResults”).show();
});
}

$w.onReady( function () {
searchValue = local.get(“searchValue”);
if ( typeof searchValue === “string”){ runSearch(searchValue);}
$w(“#dataset1”).onReady(() => {
const numberOfItems = $w(“#dataset1”).getTotalCount();

    $w("#dataset1").getItems(0, numberOfItems) 
        .then((result) => {

const dynamicPageURLs = result.items.map(item => item[linkField]);
local.setItem(‘dynamicPageURLs’, dynamicPageURLs);
})
. catch ((err) => {
console.log(err.code, err.message);
});
});
$w(“#repeaterResults”).onItemReady(($w, dataItem, index) => {
let linkToDynamicPage = dataItem[“link-RefugeeVoices-title”];
$w(‘#buttonResults’).onClick(() => {
wixLocation.to(linkToDynamicPage);
});
});
$w(‘#repeaterResults’).onItemReady(($w, itemData, index) => {
$w(“#buttonResults”).label = itemData.title;
});

});

export function button4_click(event, $w) {
searchValue = $w(‘#input2’).value;
runSearch(searchValue);
session.setItem(“searchValue”);
wixData.query(‘1RefugeeVoices’)
.contains(‘interviewSummary’, $w(‘#input2’).value)
.or(wixData.query(‘1RefugeeVoices’).contains(‘title’, $w(‘#input2’).value))
.or(wixData.query(‘1RefugeeVoices’).contains(‘placeOfBirth’, $w(‘#input2’).value))
.find()
.then(res => {
$w(‘#repeaterResults’).data = res.items;
$w(“#repeaterAB”).hide();
$w(“#repeaterResults”).show();
});
}

7

ah, sorry.
It should be

searchValue = local.getItem("searchValue");
 

//NOT:
searchValue = local.get("searchValue");//WRONG
8

Have made this change but it doesn’t work for my page! I search, click on a result in the search results repeater, press back and still see all my interviewees, not just the ones in my search results repeater. Ah well. I sense I need to tell the page to keep the results repeater visible. Thanks so much for your help, you have put me on the right path…

9

You can see my page here: https://www.ajrrefugeevoices.org.uk/copy-of-interviewees

10

In the buton4_click()

//write this:
 session.setItem("searchValue", searchValue);//RIGHT
 

//Wrong
session.setItem("searchValue", value);//WRONG
11

Thank you so much! Let me try this…

12

You are amazing! Thanks so much. It now works perfectly!

13

You’re welcome :slight_smile: