Help with search feature please

Hi! Firstly thanks for all the Wix Code tutorials and articles, found most to be really easy to follow :slight_smile: I’m very very new to coding but managed to set out a search feature following this excellent tutorial
https://support.wix.com/en/article/how-to-add-a-search-of-your-data-collection-to-a-page

My search at present consists of one user input, a search button and a table to show the results - all on the same page. I also managed to do this with dropdowns instead of a user input and the search worked but I don’t know how to add BOTH dropdowns and a user input to the search feature. Its for a real estate website (testing at the moment) and the dropdowns would be for features such as location, property type etc. The user input is for the property ID so clients can get details on a particular property.

I would also like to direct the results to a different page to be shown on a repeater. I managed to show the results in a repeater instead of a table that is shown in the tutorial, and it worked but this is on the same page as the search at the moment.
Any help would be really appreciated.
Thanks :slight_smile:

Would be great if someone could point me in the right direction with at least how to include a user input and dropdown on the same search feature please

Seems my posts are invisible. Third time I’ve asked for assistance and no replies?

Hi,

You just need to add multiple conditions to your query. Something like this:

// the following values set in the component event handlers
let dropdown1_value = < value from #dropdown1 >
let dropdown2_value = < value from #dropdown2 >
let input1_value = < value from #input1 >

...

// a query withy multiple conditions
wixData.query("myCollection")
   .eq("field1", dropdown1_value)
   .eq("field2", dropdown2_value)
   .eq("field3", input1_value)
   .gt("age", 25)
   .find()
   .then( (results) => {
      let items = results.items;
   } )
   .catch( (error) => {
      let errorMsg = error.message;
      let code = error.code;
   } );

See the WixDataQuery() API for more information on constructing complex queries.

Good luck,

Yisrael

Thanks for your reply Yisrael, will have a good read through the API too.
Have a good day :slight_smile:

So thanks to Yisrael’s help and lots of searching I managed to create a home page with a search feature for property listings which shows results on a repeater on the same page and it works really well. Great!

This is my current code:

import wixData from ‘wix-data’;

export function search_click(event, $w) {
wixData.query(‘Properties’)
.contains(‘propertyId’,$w(‘#idInput’).value)
.contains(‘status’,$w(‘#statusDrop’).value)
.contains(‘location’, $w(‘#locationDrop’).value)
.contains(‘propertyType’,$w(‘#typeDrop’).value)
.contains(‘bedrooms’, $w(‘#bedsDrop’).value)

.find() 

.then(res => {
$w(‘#repeater1’).data = res.items;

});
}

I now want to show these results on a repeater on a different page which I’ll name ‘results’. I can’t find any code example using dropdowns and a repeater for this situation and have been experimenting with different codes to no avail! I’ve looked at the wix-location API but no idea what to add to my code.

I’ve watched this video by Code Queen Search Code on Wix using Corvid to Display Results on another page - YouTube which is really helpful but I can’t figure out what changes I need to make to the code on the results page. I’ve set up the repeater on my results page and connected it to a database but still struggling with code.

I know for those of you who are a bit more experienced with code this probably seems like a really easy solution and a stupid question but it is like a different language to me…complete beginner and its driving me nuts!

Can anyone assist please?

Hi Mlisa!

Is your code snippet working?
Do you get the results you’re seeking?

If you do, and your goal is to achieve the same in a different page, why not using the same code in the new page?
You can also use the Local-Storage to save the user’s input and than present the results using the wixStorage API .
Another work-around I can offer you is to use the following example of a multi-staged form (instead of using it as a form you can use it as a multi staged filter/search and in the last part present the results based on the input the user provided).
Multi-staged form example:

Hope it helps.
Best of luck!

Doron. :slight_smile:

Hi Doron
Thanks for getting back to me.

I amended the above code a couple of days ago to this as I wanted the search to show on a different page:

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

export function search_click(event, $w) {
wixLocation.to(/results);

wixData.query(“Properties”)

.contains(‘status’,$w(‘#statusDrop’).value)
.contains(‘location’,$w(‘#locationDrop’).value)
.contains(‘propertyType’,$w(‘#typeDrop’).value)
.contains(‘bedrooms’,$w(‘#bedsDrop’).value)
.contains(‘price’,$w(‘#minDrop’).value)
.contains(‘bedrooms’,$w(‘#maxDrop’).value)

.find()
.then(res => {
wixLocation.to(/results);
});
}

This sends the results to a different page on a repeater connected to my database, great!

However the min / max price search isn’t working (I only have one field for price in my database) and the repeater shows all the items in my database…its not showing a filtered search.

Also there is a delay until the results page opens which will probably get worse once I add all properties (around 400).

My main issue though at the moment is how to show filtered results.

Hope you can advise?
Thanks

Can someone please help me.

I’m sure its a simple fix but I have been trying to sort this for 3 weeks now and about to give up

Hi

First of all, your code uses the wrong field for max. You have:
.contains(‘bedrooms’,$w(’ #maxDrop ').value)
Obviously, you don’t mean bedrooms .

To filter min/max, you need to use lt and gt . Something like this:

 .gt('price', $w('#minDrop').value)   
 .lt('price', $w('#maxDrop').value) 

This creates a range to check for greater than minDrop and less than maxDrop.

I hope this helps,

Yisrael

Hi Yisrael

Thanks I amended that now.
On my results page I have a repeater connected to my database, is that the right way to do it or do I need to use code for the repeater?

And lastly do I need to use all of these in my search page:
import {local} from ‘wix-storage’;
import wixLocation from ‘wix-location’;
import wixData from ‘wix-data’;

Thanks

Connecting your repeater to a dataset is the easiest way, but using code provides more control over how the items are set. The choice is yours and really depends on your needs.

Thank you :slight_smile: