Dropdown menu to show results on click

I have 3 dropdown menus,where people can sort location(country,state,city)
After selecting the location there is a search button that should work on click and According the location selected would like to display the results on another page,in a repeater.
I don’t know/can’t trigger the on click button.
The dropdown filters correctly.Once filtering has finished how can i make the search button to work?Thank you

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

import wixLocation from ‘wix-location’;

$w.onReady( function () {uniqueDropDown1();
});

function uniqueDropDown1 (){

wixData.query("Companydetails") 

    .limit(1000) 

  .find() 

  .then(results => { 

const uniqueTitles = getUniqueTitles(results.items);

       $w("#selectProfessional").options = buildOptions(uniqueTitles); }); 

function getUniqueTitles(items) {

const titlesOnly = items.map(item => item.category);

return [… new Set(titlesOnly)];}

function buildOptions(uniqueList) {

return uniqueList.map(curr => {

return {label:curr, value:curr};

    });}} 

export function selectProfessional_change(event, $w) {

uniqueDropDown2();

$w(“#selectCountry”).enable();}

function uniqueDropDown2 (){

wixData.query("Companydetails") 

    .contains("category", $w("#selectProfessional").value) 

    .limit(1000) 

  .find() 

  .then(results => { 

const uniqueTitles = getUniqueTitles(results.items);

       $w("#selectCountry").options = buildOptions(uniqueTitles); }); 

function getUniqueTitles(items) {

const titlesOnly = items.map(item => item.country);

return [… new Set(titlesOnly)];}

function buildOptions(uniqueList) {

return uniqueList.map(curr => {

return {label:curr, value:curr};

    });}} 

export function selectCountry_change(event, $w) {

uniqueDropDown3();

$w(“#selectprovince”).enable();}

function uniqueDropDown3 (){

wixData.query("Companydetails") 

    .contains("country", $w("#selectCountry").value) 

    .limit(1000) 

  .find() 

  .then(results => { 

const uniqueTitles = getUniqueTitles(results.items);

       $w("#selectprovince").options = buildOptions(uniqueTitles); 

  }); 

function getUniqueTitles(items) {

const titlesOnly = items.map(item => item.province);

return [… new Set(titlesOnly)];

} 

function buildOptions(uniqueList) {

return uniqueList.map(curr => {

return {label:curr, value:curr};

    });}} 

export function selectprovince_change(event, $w) {

uniqueDropDown3();

$w(“#selectTown”).enable();}

function uniqueDropDown4 (){

wixData.query("Companydetails") 

    .contains("province", $w("#selectprovince").value) 

    .limit(1000) 

  .find() 

  .then(results => { 

const uniqueTitles = getUniqueTitles(results.items);

       $w("#selectTown").options = buildOptions(uniqueTitles); 

  }); 

function getUniqueTitles(items) {

const titlesOnly = items.map(item => item.town);

return [… new Set(titlesOnly)];

} 

function buildOptions(uniqueList) {

return uniqueList.map(curr => {

return {label:curr, value:curr};

    }); 

} 

}

export function searchButton_click() { //search button code?

let word = $w(“#selectProfessional”).value;
let word1 = $w(“#selectCountry”).value;
let word2 = $w(“#selectprovince”).value;
let word3 = $w(“#selectTown”).value;
local.setItem(“searchWord”, word);

wixLocation.to(`/services`); 

}

Hello

Make sure the on click event is added on the properties panel.
can you please provide your editor/website URL

And also here I assume you mean uniqueDropDown4() not uniqueDropDown3() :

 export function selectprovince_change(event, $w) { 
 uniqueDropDown3();  

Thanks
Massa

1 Like

Thank you @massasalah18 for the reply it is much appreciated.
I have fixed the mistake at the export function.

This is the code to the editor.
I have the feeling that my search button click code is wrong,any advice would be appreciated.
Currently the dropdown works perfectly,filters through the values from the database.
The repeater by his own works as well.
Only what I am missing to connect the search button- to connect it to take in consideration the values selected from the dropdown menu start the search and show the correct search results in the repeater.
Thank you

Hello
so first thing you need to add the on click event :


it should be like this: (make sure of the spelling)

This way the function links to service page.

Now in service page you need to get the value from the storage to get it’s corresponding data to show on the repeater.

Massa

1 Like

I have set up the button as suggested,and now when I click it redirects to another page-thats a step
Can you help a little bit how to set up the search function on the repeater page please
I guess I need to add the function and set up a function for the search itself,that will display the code to the repeater
Can you help me please.Thank you

export function searchbutton_click() {

search(); 

}

function search() {

wixData.query 

//code that gets the data from the dropdown selection//

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

Check this search example , it would guide through the implementation of a search functionality.

Best

@massasalah18 Thank you for the link. I have already watched every video and read every forum post regarding the dropdown.The problem is that I don’t have a search input,I have a searchbutton.Each tutorial and help refers to the search input and gets the value of it. As mine if a button can you help me,direct me,what I need to replace .value with to make the button work properly. To filter according the choices made in the dropdown and not according a value entered in a user input

Hi Massa . I think i managed to make the search work looks like it is searching but now i have difficulties to code the repeater page properly to show the results.would appreciate it if you can have a look please.
I duplicated the home page and tried a different approach in home page copy set it up and now it is redirecting to the services page and in debugger values show up this makes me think that the search works.
Now In the repeater is being populated some value from the database but not what I selectee in the dropdown.
Please help me out.
I am willing to pay for this to make it work

Hello
So first to get things clear the functionality you want is :

User picks drop down values → click search → the repeater shows items based on the drop down value
or
User picks drop down values → click search → user gets directed to a page with a repeater showing the result

The second option please
User picks-click search-redirects to services page-results shown in the repeater

Okay then here’s the steps you need to follow:

  • inside the on click function you need to save the drop downs values in the local storage as you will be using them in service page (as you want the search result to based on all the drop down values) :
export function searchButton_click() {  //search button code?

 let word = $w("#selectProfessional").value;
 let word1 = $w("#selectCountry").value;
 let word2 = $w("#selectprovince").value;
 let word3 = $w("#selectTown").value;
 
 local.setItem("Professional", word);
 local.setItem("Country", word1);
 local.setItem("Province", word2);
 local.setItem("Town", word3);

    wixLocation.to(`/services`);

}

The in service page (inside on ready function) set a filter on the data set connected to the repeater based on the values saved in the local storage :

$w("#myDataset").setFilter( wixData.filter()
  .eq("ProfessionalField", local.getItem("Professional"))
  .eq("CountryField", local.getItem("Country"))
  .eq("ProvincelField", local.getItem("Province"))
  .eq("TownField", local.getItem("Town"))
);

Best of luck!
Massa

@massasalah18 Hy,I am so sorry for disturbing you again.
I didn’t managed doing it,paid somebody to do it and he failed to do it.
I have moved the whole thing to a test page,was thinking to start fresh,with less values just to get it working.
Applied your code set on on ready function there must be something I am missing,if you got a little bit of time please have a look.
(I tried doing this with filtering on the same page and that worked,but showing the results on another page with repeater is not)

https://editor.wix.com/html/editor/web/renderer/edit/df488e44-9533-49c2-9c6a-c90738da98d8?metaSiteId=e0e5d126-eee7-4b4e-a8ed-deeffee5c229&editorSessionId=c90d2f72-4d2f-56a2-8f5d-c846d6a7b547

$w.onReady(() => {
});

$w.onReady( function (){
wixData.query(“Tutors”)

    .limit(100)        
    .find() 
    .then(results => { 
     $w('#repeater1').data = results.items; 

});})

export function button2_click(){
filter()
}
function filter() {
$w(“#dataset1”).setFilter( wixData.filter()
.eq(“fieldOfStudy”, local.getItem(“field”))
.eq(“location”, local.getItem(“location”))

 )}

Good morning!

I took a lot at your editor, It’s way simpler than you are doing.
Here’s all the code needed in the repeater page:

import { local } from 'wix-storage';

import wixData from 'wix-data';

$w.onReady(function () {
    $w('#dataset1').setFilter(wixData.filter()
        .eq("fieldOfStudy", local.getItem("fieldOfStudy"))
        .eq("location", local.getItem("location"))
    )

});

However note that this forum is specialized in guiding you through solving your wix code problems and not coding your site. If you need help with building your website feel free to visit wix arena, There’s wix experts waiting to get your website ready for you!

Good Luck
Massa

Thank you Massa for your help.It is much appreciated.

1 Like

I have paid somebody a wix expert to help and unfortunately didn’t get the job done than.But with your help managed to make it work

Hi Massa, I’ve been searching for codes for the first functionality you mentioned which is:

User picks drop down values → click search → the repeater shows items based on the drop down value

I’ve four drop downs named dropdown1, dropdown2, dropdown3, and dropdown4

And my field keys are carBrand, carModel, carVariant, and year

Appreciate if you could advise me on this. Thank you!

@gavinfonges

Please add a new post with a link to refer back to this old post from Jan 2019 rather than bumping up an old thread.

You can see examples for this here.
https://www.wix.com/corvid/example/mega-search
https://www.wix.com/corvid/example/search-a-database
https://www.wix.com/corvid/forum/community-discussion/filtering-repeater-with-a-dropdown
https://www.vorbly.com/Vorbly-Code/WIX-REPEATER-WITH-MULTIPLE-FILTERS
How to Filter Items on Repeater Using a Dropdown and Boolean Values on Wix Code

This old post will now be closed.