Dropdown menu with Search as you Type

Ask the community
,
1

Greetings,

I wish to add a form to my page that lets users select an item from a list that’s over 4000 items long, (airports and cities). If a user can type a little bit (like New York), into a text box and a list can populate beneath it with partial matches, that would be most helpful to them.

Surprisingly, this feature is VERY hard to find on third party form builders, even paid ones. In fact, they are ALL the same in this regard.

Can Wix do this? Can I add code to a text box that will do this, etc.? Can anybody help point me in the right directioin?

Attached a photo for reference. Thanks!

2

Hey Chris,

I think this is what you’re looking for -

Note that any other source of data (other than a collection) can be searched as well assuming it has some API for that.

Good luck :slight_smile:

3

Hi Dor,

I don’t know what I’m NOT doing right, but I know I’m not doing it right.

my site :
https://merlinregis.wixsite.com/accueil

Basically, I’d like to offer 2 choices to my visitors :

  • 1 - They type in what they want in the input box and the table shows it on KeyPress

  • 2 - They select year and/or brand and/or model and/or part name of the part that they’re looking for, and the table shows it.

I tried both of the solutions suggested in the link you mention above and neither work for me :frowning:

The table just doesn’t react. :frowning:

I just did the code for the 1st 2 dropdowns, since obviously, if the 1st 2 don’t work, the other 2 won’t either.

The developper console say :

Loading the code for the site. To debug this code, open masterPage.js in Developer Tools.
Loading the code for the Accueil page. To debug this code, open i93j3.js in Developer Tools.
There was an error in your script
TypeError: n is not a function

Thanks in advance

4

Oooops, would help to show my code :stuck_out_tongue:

import wixData from ‘wix-data’;
export function searchinput1_keyPress(

wixData.query(‘Inventaire’)
.wixData.query(‘Inventaire’).contains(‘veh_year’, $w(‘#input1’).value)
.or(wixData.query(‘Inventaire’).contains(‘brand’, $w(‘#input1’).value))
.find() // Run the query
.then(res => {
// Set the table data to be the results of the query
$w(‘#table1’).rows = res.items;
}
);

export function searchdropdown1_change(event, $w) {
wixData.query(‘Inventaire’)
.contains(‘veh_year’, $w(‘#dropdown1’).value)
.or(wixData.query(‘Inventaire’).contains(‘brand’, $w(‘#dropdown1’).value))
.find() // Run the query
.then(res => {
// Set the table data to be the results of the query
$w(‘#table1’).rows = res.items;

});

}
}
};
}