Hi,
Im trying to link an input box on my header to and input box on a dynamic page to create a search bar. I can currently type in the header input box and press the search button and it will open the dynamic page and put the text into the input box on that page.
I need it to also press the search button on the dynamic page when I press the search button on the header.
Basically I need the header input and search button click to repeat on the one on the dynamic page to show search results without having to press the search button on the dynamic page. see screenshot below and code;
This is the code on my ‘site’;
$w.onReady( function () {
$w(‘#searchButtonHeader’).onClick(() => {
const searchTerm = $w(‘#searchFieldHeader’).value
local.setItem(“searchTerm”, searchTerm);
});
})
This is the code on my page;
import wixWindow from ‘wix-window’;
import {local} from ‘wix-storage’;
if (wixWindow.formFactor === “Mobile”){
$w(“#column5”).hide();
$w(“#column5”).collapse();}
import wixData from ‘wix-data’;
export function searchButtonPage_click(event) {
filter($w('#searchFieldPage').value);
function filter(title){
$w(‘#dynamicDataset’).setFilter(wixData.filter().contains(‘name’,title));
}
}
$w.onReady( function () {
$w(‘#searchFieldPage’).value = local.getItem(“searchTerm”);
$w(“#searchFieldPage”).onKeyPress((event, $w) => {
if (event.key === “Enter”) {
let searchstring = $w(“#searchFieldPage”).value;
}
});
})
Thanks
Matt
Seem like a really bad idea to repeat that kind of behaviour in my opinion. You should make a search results page like your dynamic page and redirect the user to that page when clicking the search button in the header.
wixLocation(“url-to-search-results-page?search=” + $w(“searchBarID”).value);
That way you will get the search word in the url when you get to the page and you can use wixLocation.query to get the value
let query = wixLocation.query;
let searchWord = query.search;
Then use your filters and everything will work great.
Hi,
thanks for your input. I’m trying find the simplest way to do It.
my dynamic page will be the search results page.
I think I understand what you mean. I will try and do It later.
Thank you
matt
Hi again,
my url is Stores/Products and my search bar ID is searchFieldHeader.
i can’t seem to get it without an error?
thanks
matt
I have got so far with the code but cant get it to link an open the dynamic page with the searchfield in the url; what am i missing??
import {session} from ‘wix-storage’;
import {local} from ‘wix-storage’;
import wixLocation from ‘wix-location’;
import wixWindow from ‘wix-window’;
import wixData from ‘wix-data’;
let previousURL = session.getItem(‘previousURL’);
session.setItem(‘previousURL’, wixLocation.url);
export function getPreviousPageLink() {
if (previousURL === session.getItem(‘previousURL’)) {
wixLocation.to(‘/’)
} else {
wixLocation.to(previousURL);
}
}
export function continueShopping_click(event) {
getPreviousPageLink();
return false ;
}
//----------------------------------------------------------------------------
$w.onReady( function () {
$w(‘#searchButtonHeader’).onClick(() => {
wixLocation(“/Stores/Products?search=”+$w(“searchFieldHeader”).value);
// const searchTerm = $w(‘#searchFieldHeader’).value
// local.setItem(“searchTerm”, searchTerm);
})
})
//---------------------------------------------------------
$w.onReady( function () {
if (wixWindow.formFactor === “Mobile”) {
$w(‘#searchFieldHeader’).collapse()
$w(‘#searchIconHeader’).collapse()
$w(‘#searchButtonHeader’).collapse()
}
$w(‘#searchButtonMobile’).onClick(() => {
if ( $w(“#searchFieldHeader”).collapsed ) {
$w(“#searchFieldHeader”).expand();
}
else {
$w(“#searchFieldHeader”).collapse();
}
if ( $w(“#searchButtonHeader”).collapsed ) {
$w(“#searchButtonHeader”).expand();
}
else {
$w(“#searchButtonHeader”).collapse();
}
if ( $w(“#searchIconHeader”).collapsed ) {
$w(“#searchIconHeader”).expand();
}
else {
$w(“#searchIconHeader”).collapse();
}
})
})
//export function homeLogo_click(event) {
// wixLocation.to(“/home”);
Thanks
Do you try to make this work with the standard Wix Stores page or have you made your own Dynamic Pages?
Also it seem that you have two onReady functions, you should only have one of those in your page. And you should put button event handlers inside the onReady, you should always click the add event handler in the properties panel.
i have a dynamic page with repeaters set to search a dynamic dataset.
I tried to make a normal dataset search on a normal page and it wouldn’t work?
@andreas-kviby it doesn’t allow me to put an even inside the onready? Imports and exports have to go At the top?
thanks
matt
Hi,
i have managed to do it now, when I type in the search bar it takes me to my
other page and in the url it has the searched text.
I just need to sort the other page now to get that text text and input it into the search bar on that page.
The only other problem that when I then type something else in that same search bar on the header it does not change the text in the search box on the other page unless I refresh the page…
do you think you could do it?
Connect via teamviewer and I will pay you 
