Create Cascading Form to search State > City

Ask the community
,
11

Yes, this is exactly what the provided code in the mentioned post will do.

What you will need to be able to create the function?

  1. 2x Dropdowns —> STATE-Dropdown + CITY-Dropdown.

I’ll need to add each individual city into the dropdown

  1. you don’t have to fill anything manually, aslong all the data is already inside of your databse. Everything works full-automatic, without any manual actions.

  2. COPY and PASTE the provided CODE…

Here a little bit modified CODE for your FIRST-UNIQUE and automatic generated DROPDOWN…

All you have to do is to FILL-OUT all the ELEMENT-IDs, of your own used ELEMENTS… (marked in → ORANGE )

If you do not want to switch the OUTPUT-DATA, then OUTPUT_FIELD equals DBFIELDS[0]

import wixData from 'wix-data';

var DBFIELDS=[], DD_ID=[], OUTPUT_FIELD=[]; 
//-------- USER-INTERFACE -------------------------
var DBLIMIT = 1000;
var DATABASE = "YOUR_DB_ID_HERE" 
//---[ Dropdown-Settings]---------------------
  DD_ID[0] = "#your_DROPDOWN-ID_here" 
//---[ DB-INPUT-Field-Settings]--------------
  DBFIELDS[0] = "your_DB-Field-ID_here"  
//---[ DB-OUTPUT-Field-Settings]--------------
  OUTPUT_FIELD[0] = "OUTPUT_FIELD_ID_HERE" //<--- DEFINE-OUTPUT-FIELD-here 
//-------- USER-INTERFACE ---------------------------
 
$w.onReady(async()=>{
   let ITEMS = await get_DBdata(DATABASE); 
   create_UniqueDropdown(ITEMS,DBFIELDS[0],DD_ID[0]); 

  $w(DD_ID[0]).onChange(()=>{
     let INDEX = $w(DD_ID[0]).selectedIndex
     console.log(ITEMS[INDEX][OUTPUT_FIELD[0]]); 
   });
}); 

function create_UniqueDropdown(items, dbfield, dropdown) {
  const uniqueTitles = getUniqueTitles(items);
  $w(dropdown).options = buildOptions(uniqueTitles); 
 
  function getUniqueTitles(items) {
    const titlesOnly = items.map(item => item[dbfield]); 
    return [...new Set(titlesOnly)];
  }

  function buildOptions(uniqueList) {
    return uniqueList.map(curr => {
      return {label:curr, value:curr};
    });
  }
}

function get_DBdata(DATABASE) {
  wixData.query(DATABASE)
  .limit(DBLIMIT).find()
  .then(results=> {
     let ITEMS = results.items 
     return (ITEMS)
  }); 
}

Example-Setup…

-Your Dropdown-ID - - -> "ddn1"
-Your DATABASE-ID - - > "myDatabase"
-Your DBFIELDS[0] =  ID of the DATABASE-FIELD you want to get data from
-You do not want to switch OUTPUT-VALUE --> 
OUTPUT_FIELD[0] = DBFIELDS[0]

You have only to edit the USER-INTERFACE-SECTION, nothing else.
Do not touch the CODE itself !

After you have setted-up the first working Dropdown, create a second function and by some little modifications, you can connect your second full automatically running dropdown to the first one.

RESULT:

  1. When page loads - - > Dropdown-1 gets loaded automaticaly with UNIQUE-VALUES out of your selected DATABASE and the corresponding DB-FIELD.
  2. When first dropdown has been filled, you generate a second (very similar) function to the first one and connect the second dropdown to the selected-value of the first one.

That means —> when user selects from first UNIQUE-Dropdown, a function starts to filter for the selected VALUE of the first DROPDOWN and puts again unique found results into the second Dropdown.

Et VOILA! That’s it! :wink:

What you want to do with your ADDRESS-INPUT-FIELD → i don’t know, you can keep it or hide it.

BY THE WAY:
I did not test the code, maybe you could get the one or the other error, which you will have to manage and fix by your own.

And like always - → do not forget to like it, if you really liked it! :wink: