After needing a combo box for my site, and researching a bit, I discovered that Wix didn’t provide a combo box element. I tried a couple ways of getting one to work, and I think I found the best workaround (in my case anyway) for it.
This process requires code, a dataset connected to a CMS Collection, an input box, and a table. The table must already be connected to the CMS using the Wix Editor.
To give it the “combo box” look, I have placed the table underneath the input box and it shows, and filters, when the user inputs text.
For cleanliness, I also have my table hide until the user inputs text, and if there is no text, it disappears.
In my case, I needed to have the input box search multiple fields at once, and so if the searched text appeared in any of the fields, they would be shown in the table.
I also have my code set so that when you select a row from the combo box, it autofills the input with the email, and you are able to use that value however you would like.
import wixData from ‘wix-data’;
$w.onReady(function () {
$w(‘#table’).hide();
$w(‘#input’).onInput(() => {
const i1 = $w(‘#input’).value;
if (i1 === undefined || i1 === null || i1.trim() === “”) {
$w(‘table’).hide();
return;
} else {
console.log(i1);
}
$w(‘#table’).show()
$w(“#dataset”)
.setFilter(wixData.filter()
.startsWith(“field1”, i1)
.or(wixData.filter().startsWith(“field2”, i1))
.or(wixData.filter().startsWith(“field3”, i1))
.or(wixData.filter().startsWith(“field4”, i1))
.or(wixData.filter().startsWith(“field5”, i1))
)
.then(() => {
console.log(“Dataset is now filtered”);
$w(‘#dataset’).refresh()
.then(() => {
$w(‘#dataset’).getItems(0, 3000)
.then((result) => {
console.log(“Items:”, result.items);
})
.catch((Err) => {
console.log(“Error retrieving items:”, Err);
});
})
.catch((err) => {
console.log(“error refreshing dataset:”, err);
});
})
.catch((error) => {
console.log(error);
});
})
$w(‘table’).onRowSelect((item) => {
let email = item.rowData.email;
$w(‘#input’).value = email;
$w(‘#table’).hide();
})
});
