Get query for value of input box?

Ask the community
, ,
1

Hi,
In the process of making a search bar.
I have used an input box on my header and set it to open to a dynamic page where my search results will show, I need the info from my search bar on my header to show in the search bar on the page as it cannot leave the page as it will disconnect from dataset.
I have used following code on my header;

export function searchButtonHeader_click(event) {
wixLocation.to(“/Stores/Products?search=”+$w(“#searchFieldHeader”).value);

}

This opens a new page and puts the input in the url as ‘search= data inputted’

I know just want this data to appear in my other box on my dynamic page, I think I have missed something though?
Here is my dynamic page code;

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

//---------------------------------------------

function filter(title) {
$w(‘#dynamicDataset’).setFilter(wixData.filter().contains(‘name’,title));
}

export function searchButtonPage_click(event) {
filter($w(‘#searchFieldPage’).value);
}

$w.onReady( function () {

let query = wixLocation.query;
let searchWord = query.search

$w(‘#searchFieldPage’).value = local.getquery(“searchWord”)

$w(“#searchFieldPage”).onKeyPress((event, $w) => {
if (event.key === “Enter”) {
filter($w(‘#searchFieldPage’).value);
}
})
})

//----------------------------------------

$w.onReady( function () {
if (wixWindow.formFactor === “Mobile”) {
$w(“#column5”).collapse();

}

});

Any Help much appreciated.

Thanks

Matt

2

Hi Matt:

OK you have a couple of things that need to be tidied up here :-).

First of all you can’t have two $w.onReady() function calls. The second one will undo the first one.
Anything you need to do when the page is ready should all be done in a single onReady function.

Now It seems like you may have copied some code that uses the local browser storage which isn’t necessary. The local object that you import from wix-storage is typically used to save and retrieve things like cookies. Since you are using the URL query to send and receive data this is not necessary.

Now the statement

let searchWord = query.search

Creates a variable called searchWord that contains the search phrase that you collected from the search bar.

So instead of using this assignment:

$w('#searchFieldPage').value = local.getquery("searchWord")

You should simply need to use the following assignment instead:

$w('#searchFieldPage').value = searchWord;

Now to execute the search you don’t need to wait for the user to hit enter, unless you need to. You already have a button handler (searchButtonPage_click) that runs the search. So you can simply call your filter function once you have the search phrase loaded into searchWord like this

 filter(searchWord);

So your code should work (unless there is something else on your page or in your code that you haven’t stated here) and should look like this:

import wixWindow from 'wix-window'; 
import {local} from 'wix-storage';  
import wixData from 'wix-data'; 
import wixLocation from 'wix-location';
//---------------------------------------------
function filter(title) {     
    $w('#dynamicDataset')
        .setFilter(wixData.filter().contains('name',title));
}

// Re run search using value in search bar.
export function searchButtonPage_click(event) {
    filter($w('#searchFieldPage').value);
}

$w.onReady(function () {
   // Load query
   let query = wixLocation.query;
   // Get search term from query
   let searchWord = query.search;
   // Add search term to input element
   $w('#searchFieldPage').value = searchWord;
   // Initially filter based on passed search phrase
   filter(searchWord);
   // Adjust view if page is displayed on mobile.
   if(wixWindow.formFactor === "Mobile") {           
       $w("#column5").collapse();
   }
});

If this doesn’t work you may want to post the URL of your page so folks can see what elements you have and the code and perhaps help debug it.

Good luck
Steve

3

Hi!
Thanks so much for taking your time to reply to my post,
It works perfect! Thankyou, It’s much appreciated!

There is just a couple if things left to do now, if I could get your advice that would be great?

I would like to be able to press ‘enter’ key on my ‘site’ code too to perform the search as well as the search button.

Also when I try and search for something else in the search bar on the header it doesn’t unless I refresh the page, I need to be able to re search without refreshing the page.

I am going to hide the search bar on the results page once all code is complete and just use it as a connection to the repeater/dataset.

Here is my URL it will explain things clearer, make a search in the header bar and you will see what I mean;

www.hyderoadretail.co.uk

And here is my code for my ‘site’ page;

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 ;
}

//----------------------------------------------------------------------------

export function searchButtonHeader_click(event) {
wixLocation.to(“/Stores/Products?search=”+$w(“#searchFieldHeader”).value);

}

//---------------------------------------------------------{
$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”);

}

This is almost the final step before I can FINALLY load all my products and get my business going!!

Thank you so much for your help!

Matt

4

Hi again,
I have done it!
I just have the problem of having to refresh the page now on a new search.

Please see following code, I think my site code could be a lot more condensed too?

Site;

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 ;
}

export function homeLogo_click(event) {
wixLocation.to(“/home”);

}

//----------------------------------------------------------------------------

export function searchButtonHeader_click(event) {
wixLocation.to(“/Stores/Products?search=”+$w(“#searchFieldHeader”).value);

}

//---------------------------------------------------------{
$w.onReady( function (){

$w(“#searchFieldHeader”).onKeyPress((event, $w) => {
if (event.key === “Enter”) {
wixLocation.to(“/Stores/Products?search=”+$w(“#searchFieldHeader”).value);}

})

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

})

Page;

import wixWindow from ‘wix-window’;
import {local} from ‘wix-storage’;
import wixData from ‘wix-data’;
import wixLocation from ‘wix-location’;
//---------------------------------------------
function filter(title) {
$w(‘#dynamicDataset’)
.setFilter(wixData.filter().contains(‘name’,title));
}

// Re run search using value in search bar.
export function searchButtonPage_click(event) {
filter($w(‘#searchFieldPage’).value);
}

$w.onReady( function () {
// Load query
let query = wixLocation.query;
// Get search term from query
let searchWord = query.search;
// Add search term to input element
$w(‘#searchFieldPage’).value = searchWord;
// Initially filter based on passed search phrase
filter(searchWord);
// Adjust view if page is displayed on mobile.
if (wixWindow.formFactor === “Mobile”) {
$w(“#column5”).collapse();
$w(‘#searchFieldPage’).collapse()
$w(‘#searchIconPage’).collapse()
$w(‘#searchButtonPage’).collapse()
}
// Adjust view if page is displayed on Desktop.
if (wixWindow.formFactor === “Desktop”) {
$w(‘#searchFieldPage’).collapse()
$w(‘#searchIconPage’).collapse()
$w(‘#searchButtonPage’).collapse()
}
});

Any help is much appreciated

Thanks
Matt