Unique List on Multiple Dropdown that are Linked Directly to Your Data Collection

Show and tell
, , ,
1

Reading through the discussion posted by @Yisrael (wix) here: https://www.wix.com/velo/forum/tips-tutorials-examples/example-remove-duplicates-from-connected-dropdown-options-using-distinct-query, his very helpful tips on using distinct() to build a unique dropdown list has helped to lean up my code tremendously. However, this function is only applicable when you do a wixData.query on information from your collection and not the dataset. So if you have set a “filter” function in your dataset that is connected to your dropdown, you won’t be able to use this function to generate another unique dropdown list for a second dropdown you’re building for your site.

So from the question of some of the comments from the original forum, I thought I’ll try out integrating multiple different codes to allow multiple dropdown that filter out the unique list of each other which I found difficult finding the answers from other examples given. So here you go:

Example of Elements on the website
Dropdown A: List of Country; $w(‘#ListofCountryDropdown’)
Dropdown B: States/Region; $w(‘#StatesRegionDropdown’)
Dropdown C: Name of Hotels; $w(‘#NameofHotelDropdown’)

Collection Name (“Listing”) - please click on the 3 dots next to the database created of your choice and select “Edit Setting” to find the Collection name. Please ensure that you copy the exact name in the setting else it won’t work.

Collection Layout - if you open up your database, every column in that database, when you look into the properties of that column, will have a field name and field key. The Column Name that I’ve included here would be the field key.
Column Name 1 = listOfCountry
Column Name 2 = statesRegion
Column Name 3 = nameOfHotels

Sample Code

import wixData from ‘wix-data’ ;

$w.onReady( function () {

function DropdownListUpdate() {
let ListofCountry = $w( '# ListofCountryDropdown ’ ).value
let StatesRegion = $w( '# StatesRegionDropdown ’ ).value
let NameofHotel = $w( '# NameofHotelDropdown ’ ).value

let ListUpdate= wixData.query( " Listing " )
if (ListofCountry) {ListUpdate= ListUpdate.eq( “listOfCountry” ,ListofCountry)}
if (StatesRegion) {ListUpdate= ListUpdate.eq( “statesRegion” ,StatesRegion)}
if (NameofHotel) {ListUpdate= ListUpdate.eq( “nameOfHotels” , NameofHotel)}

function Options(items) {
return items.map (curr=>{
return {label:curr, value:curr}
})
}

function CountryDropdown() {
ListUpdate
.limit ( 1000 )
.ascending( “listOfCountry” )
.distinct( “listOfCountry” )
.then(results => {
let CountryList = Options(results.items);
$w( '# ListofCountryDropdown ’ ).options = CountryList; })
}
CountryDropdown()

function StatesRegionDropdown() {
ListUpdate
.limit ( 1000 )
.ascending( “statesRegion” )
.distinct( “statesRegion” )
.then(results => {
let StatesRegionList = Options(results.items);
$w( '# StatesRegionDropdown ’ ).options = StatesRegionList ; })
}
StatesRegionDropdown()

function HotelsDropdown() {
ListUpdate
.limit ( 1000 )
.ascending( “nameOfHotels” )
.distinct( “nameOfHotels” )
.then(results => {
let HotelList = Options(results.items);
$w( '# NameofHotelDropdown ’ ).options = HotelList ; })
}
HotelsDropdown()
}
DropdownListUpdate()

$w( '# ListofCountryDropdown ’ ).onChange(()=>{DropdownListUpdate(); })
$w( '# StatesRegionDropdown ’ ).onChange(()=>{DropdownListUpdate(); })
$w( '# NameofHotelDropdown ’ ).onChange(()=>{DropdownListUpdate(); })
}

Code Explanation
To run a distinct() function, you must perform a wixData.query. To run a wixData.query, you must first import wixData. So the first line of your code must be import wixData from “wix-data” ;

Then as always, if you want the function to work, you need on ready your function: $w.onReady( function () {}

Because you can only run the distinct() function using wixData.query which as I’ve said are connected to your collection where else all filter functions are connected to your dataset, hence why there is no filter function that can narrow down your query list to provide that multiple filter affect to your multiple dropdown. However, a query function also allows specific “filtering” ability by using the eq() or contains() function that will be the key to building this multiple filtering effect.

The first function: DropdownListUpdate() need to be run the moment the site start up to build up your first list of drop down. Hence why you will see the function being called after I’ve closed the code to the function. As the drop down list need to be refresh every time something is selected, you then see the onChange function that was set which basically say, on changes made to the drop down, update the information within the drop down to update the list within the drop down.

I’m also a rather beginner to wix code and have gotten this after multiple reading up of the API and testing the codes on my own website. It works perfectly on mine but if you have any issue putting this up for yourself, you can leave a comment and I’ll see what I can do to help.

I’m not working for wix, so please don’t expect an immediate response if you are leaving a comment. I’m just posting this because a lot of posting on this forum has helped me build my codes and I thought I can help others with this.

2 Likes
2

Well done Irene. Some more informations to this topic needed?

example from dropdownAPI…

$w("#myDropdown").options = [
  {"label": "Who's on first!", "value": "first"},
  {"label": "What's on second", "value": "second"},
  {"label": "I Don't Know is on third", "value": "third"}
];

var DATABASE = "YourCollectionNameHere"
var FieldToBeDistinct = "FieldIdToBeDistinct"

async function get_uniqueDropDown() {console.log("load_Unique-DropDown")
    let ARRAY = []
    let dropdownOptions = [ ]
    let query = await wixData.query(DATABASE)
    
    query.distinct(FieldToBeDistinct)
    .then((results) => {console.log("Distinct-Results: ", results)
        let items = results.items
        for (var b = 0; b <items.length; b++) { 
           console.log("Item: ", items[b])
           //ARRAY.push({"_id": String(b), "item": items[b]})
	   dropdownOptions.push({"label": items[b], "value": items[b]})
        }
    })
    .then(()=>{
        $w('#myDropDown').options = dropdownOptions
    })
}

Of course this can be improved much more and is just an example.
This code can be expanded to make it much more flexible and universal.

(Code not tested, but should normaly work) :grin:

An upgraded version of this code-example you will find here in action…
https://www.media-junkie.com/pflegeservice

3

Thanks for the comment. I don’t quite understand the codes you’ve placed in your comment or how does that work. :smile:

4

@angirene7
Then GO trough all the given POSTs in this “interactive-example”…
https://www.media-junkie.com/databases

And perhaps at the end you will understand more about it :wink:
Perhaps you should START with the original POSTs…

https://www.wix.com/velo/forum/community-discussion/wix-storage-checkboxgroup/p-1/dl-5fcc17364ce20b002d0ffbdf-5fcc15f3a032ca0034d80c97-1

You will recognize your used “CODE” which you will find also in the original post.
I just upgraded it a lot :sweat_smile:.

5

I’ll spend some time reading through this for sure. Always good to learn something. Thanks :wink:

6

hi, Irene I test the code is perfect but when I do a new search on the dropdown, its not allowed to do it, dropdown stock on the previous search, I have to reload the page then I can make a new search. let me know if you have any ideas why that happen, thank you

7

hi, I Also have refresh button but still dropdown wont allowed me to do the new search until I reload the page
Thank you

8

I don’t know how you’ve set the search function in your page, but if you want to refresh the list, you can simply add a code that says:

$w(‘#RefreshButton’).onClick(()=>{ DropdownListUpdate() })

9

Again as mentioned above, I don’t really how you’re setting your search function, but assuming you’re looking a code that says:

$w( '# ListofCountryDropdown ’ ).onChange(()=>{
your codes for the search })

It should automatically make the new search upon selecting a new item from the dropdown list, no?

10

Hi irene, no the dropdown wont expand after you do the first search, so i need to reload the page, thank you

11

Hi irene let me try it
thank you

12

Hi Irene its working perfect now adding this code you said $w(‘#RefreshButton’).onClick(()=>{ DropdownListUpdate() })

Thank you, very much
can I follow your project some how?

13

Then there must be some issue with your search code. If you’ve followed my original set of code and the explanation I’ve included, the function DropdownListpdate() is generally the code to run the whole function set the {}

Basically, every time you call for this function code = DropdownListUpdate(), the function you’ve set within it will run.

The reason why when you refresh the page, it works, is because the page is set to run this function every time the page load and that command was right at the very bottom of my code that simply says: DropdownListUpdate()

So if you want the list to update after your search without refreshing your page, simply insert DropdownListUpdate() within your search code.

14

I don’t think there is the capability of letting you follow the content of my project without granting you access to make amendments to it. Sorry.

15

Ok
Thank you again