Hi there,
I need to have my members choose a max of six specialities from a list on their profile page. At the moment I have a radio button but they can only pick one from that. Does anyone know of any way to do this? The choices will go into their profile in the members database. It needs to be a maximum of six too. I don’t want them to be able to choose every option. Thanks
Emma, this example of using a repeater dropdown with checkboxes in it may be the best route to go, especially if the list of specialties is quite long. Be sure to open it up in the Wix Editor and turn on developer tools so you can see the code and preview it.
You can use a variable to track how many specialties have been chosen by putting some code in the onClick event of the checkbox contained in the repeater. You would also want the code to disable the checkbox once six have been chosen.
Also, if you go the repeater route, get familiar with ForEachItem . It’s a way of getting at the data of each item in a repeater.
If this approach of using a repeater seems too daunting and your list of specialties is not huge and always changing, you could simply use checkboxes for each specialty and still use a variable to track how many have been checked.
Good luck. You have a lot to think about here.
Thanks so much anthonyb. Thats really helpful. I have tried to follow it. When I run the code it says “Wix code SDK error: The “onItemReady” function of “specialities” threw the following error: $item(…).onChange is not a functionCopy of Search Completion Process Pra…Line 27”
My database is called Specialities and I have changed everywhere it said ‘continents’ to ‘specialities’. What am I missing?
Code:
import wixData from “wix-data”;
let lastFilterSpecialities = ;
$w.onReady(() => {
// handle each suggestion repeater item
$w(“#specialities”).onItemReady(($item, itemData, index) => {
$item(‘#optionCheckbox’).onChange(() => {
filterByCheckboxes()
})
$item(“#optionText”).text = itemData.value;
});
loadSpecialities();
});
function loadSpecialities() {
wixData.query(‘Specialities’)
.find()
.then(results => {
$w(“#specialities”).data = ;
// Create and map an array for the dropdown menu options
let specialitiesDropdownOptions = ;
specialitiesDropdownOptions.push(…results.items.map(specialities => {
return { “_id”: specialities._id, “value”: specialities.title, “label”: specialities.title };
}));
$w(‘#specialities’).data = specialitiesDropdownOptions;
});
}
// Filtering per options checked
function filterByCheckboxes() {
let specialities = ;
$w(“#specialities”).forEachItem(($item, itemData, index) => {
if ($item(‘#optionCheckbox’).checked) {
specialities.push($item(“#optionText”).text);
}
});
filter(specialities);
$w(‘#numSpecialitiesText’).text = ${specialities.length} specialitie${((specialities.length > 1) ? "s " : " ")} selected.;
}
// Collapse or expand the multi-select menu on click
export function specialitieBox_click(event) {
if ($w(‘#specialities’).collapsed === true ) {
$w(“#specialities”).expand();
} else {
$w(“#specialities”).collapse();
}
}
function filter(specialities) {
let newSpecialitiesFilterCheck = compareArrays(specialities, lastFilterSpecialities);
if (!newSpecialitiesFilterCheck) {
let newFilter = wixData.filter();
newFilter = newFilter.hasSome(‘specialities’, specialities);
$w(‘#dataset1’).setFilter(newFilter).then( function () {
let count = $w(“#dataset1”).getTotalCount();
});
lastFilterSpecialities = specialities;
}
}
// Code to compare string arrays
// Used to compare the current and previous continent selections
function compareArrays(newFilterArray, lastFilterArray) {
if (newFilterArray.length !== lastFilterArray.length) { return false } //Checking if the number of items in the filter arrays match
//Sort both arrays for easy comparison and checking if the items match
let sortedNewFilterArray = newFilterArray.concat().sort()
let sortedLastFilterArray = lastFilterArray.concat().sort()
for ( let index in sortedNewFilterArray) {
if (sortedNewFilterArray[index] !== sortedLastFilterArray[index]) return false
}
return true
}
Emma, I did the same search and replace that you did from ‘continents’ to 'specialties" and realized that I needed to delete and then re-add (by clicking the “+”) the onClick function for the box. Wix does not recognize the function seemingly unless you go through that when you change the name. I hope I’m not being nitpicky by pointing out that “specialties” is the correct spelling.
I did not receive the same error that you referenced as I do get the repeater to come up with a list of specialties. In what field in specialities are you storing the actual specialties? The code is expecting them to be in the title field:
return { “_id”: specialities._id, “value”: specialities.title, “label”: specialities.title };