Search on Home Page?

Ask the community
,
1

I have a Text and a Search button on my home page. When user types a text to search and clicks on the search button on the home page , I would like to take him to a search page e.g /search page with the dataset dynamically set on a Repeater on this page . I have written below code on the OnClick event of the Search button (btnSearch) on the home page.
Below works if I am already on the /search page , but does not work if I am on the /home page. Any advise will be appreaciated.

Below is the code on the OnClick event of the Search (btnSearch) button on the home page:

import wixLocation from ‘wix-location’;
import wixData from ‘wix-data’;

export function btnSearch_click_1(event, $w) {
//Add your code for this event here:

wixLocation.to("/search"); 
wixData.query("DATABASENAME") 
     .find() 
     .then( (results) => { 
       $w("#repeater1").data = results.items; 
		$w("#txtSearchTitle").text = "Test Search" ; 
     } ) 
     .catch( (err) => { 
       let errorMsg = err; 
   } );

}

2

Hi Yashika,

Welcome to Wixcode.

In your code example, what doesn’t work? What happens? What doesn’t happen? Please provide more details so we can better understand your problem.

Thank you,

Yisrael

3

Case 1)
When user enters search text on the HOME page and clicks on the search button , they get redirected to the search page, but the search does not execute automatically.

In my code example below code :

export function btnSearch_click_1(event, $w) {
//Add your code for this event here:
wixLocation.to(“/search”); -----> this executes correctly
-----> Below does not execute
wixData.query(“DATABASENAME”)
.find()
.then( (results) => {
$w(“#repeater1”).data = results.items;
$w(“#txtSearchTitle”).text = “Test Search” ;
} )
.catch( (err) => {
let errorMsg = err;
} );
}

Case 2)
When I am already on the SEARCH page , then everything works fine

Do we need any special code on the Onload event of the search page??

4

You’re right. You need to run the query in the onReady() function (that’s probably what you meant when you said Onload) of the search page. Right now you’re going to the search page, but then nothing triggers the update of the page - the right place for that is onReady().

5

Perfect, this worked. Yisrael, you are a STAR.

Thanks

6

Great! Glad it worked Yashika.

7

Have one more question.

Before running the .find() in the above code, I have to run multiple AND and OR conditions to query against the database.

e.g
(category = “HUM”) AND (keyword = ”ERICA” OR keyword = “SOPHIA”)

In below example I am unsure how to put the AND/OR conditions:

selectedCategory=“HUM”
keyword1=“ERICA”
keyword2=“SOPHIA”

query = wixData.query(‘DATABASENAME’).eq(‘category’, selectedCategory);
query = query.or(wixData.query(‘DATABASENAME’).contains(‘keywords’, keyword1));
query = query.or(wixData.query(‘DATABASENAME’).contains(‘keywords’, keyword2));

Any example for above will help.

8

correction to e.g. given

(category = “HUM”) AND (keyword LIKE ”%ERICA%” OR keyword LIKE “%SOPHIA%”)

9

Hi Yashika,



let selectedCategory="HUM";
let keyword1="ERICA";
let keyword2="SOPHIA";
wixData.query('DATABASENAME')
   .or(wixData.query('DATABASENAME').contains('title', selectedCategory))
   .or(wixData.query('DATABASENAME').gt('someColumn', keyword1))
   .or(wixData.query('DATABASENAME').lt('otherColumn', keyword2))
   // add more .or's here
   .find()
   .then(res => {   
      console.log(res);
    });
}
10

Ido,

I am facing one more issue with the search functionality. I have a text and a search button on my home page. When the user types a text to search and clicks on the search button I excute below code:

export function btnSearch_click(event, $w) {
//Add your code for this event here:
if (wixLocation.path==“search”) {
Search($w(“#cboCategory”).value,$w(“#txtSearch”).value.trim(),$w(“#repeater1”));
}
else {
wixLocation.to(“/search”);
}
}

The search page has a repeater control connected to the dataset. The dataset is linked to a database with no filters. Below is the code in the Search page:

$w.onReady(function () {
//TODO: write your page related code here…
Search($w(“#cboCategory”).value,$w(“#txtSearch”).value.trim(),$w(“#repeater1”));
});
export function Search(selectedCategory,selectedSearch,SearchRepeaterData) {
// convert the keywords array to an array of queries (one for each keyword)
const allQueries = keywords.map(keyword => queryByKeyword(selectedCategory,keyword))
// join the different queries into one query using OR
const joinedQuery = joinQueriesWithOr(allQueries)
joinedQuery.find()
.then( (results) => {
console.log(joinedQuery);
SearchRepeaterData.data = results.items;
} )
.catch( (err) => {
let errorMsg = err;
} );
}

The issue I am facing is that when the search page loads it first executes the Dataset query (without filters) and then user has to click again to search on the search page. Is there a way to bypass the default dataset query?

You can check the issue on the under development site at https://www.robosoftics.com
Thanks

11

Hi,
I’m still kinda new to using coding and stuff. I have a slight problem with a search code that I’m working on. I’m working with 3 Drop down User Input and a onClick Search button. And when I try and search, this is the error that I get " TypeError: Cannot read property ‘items’ of undefined "
Below is the coding that I’m working with.

import wixData from ‘wix-data’;

export function isearch_click(event, $w) {
$w(“#dataset1”).setFilter(wixData.filter()

    .contains("district", $w('#dropdown1').value) 
    .ge("bedrooms", $w('#dropdown2').value) 
    .between("price",parseFloat($w('#dropdown3').value), parseFloat($w('#dropdown4').value))) 

.then(res => { 
        console.log("Dataset is now filtered"); 
        $w("#repeater1").data = res.items; 
    }). **catch** ((err) => { 
        console.log(err); 
    }); 
$w("#repeater1").expand();

}

Please need your assistance. Thanks.

12

The dataset’s setFilter() function does not return results in the Promise’s .then() function.

I suggest looking at the Search example to see how to do a search.