Hi team Semantic-UI,
I am trying to use semantic UI multiple search selection dropdown in email input inside a form. My aim is to search from save email contacts and also take in new contacts, then send message to new input that is not saved/picked from the dropdowns. But i noticed that the new input isn't gotten from the field. so the message is not sent.
Please how do you make a multiple search dropdown save new inputs?
Have you tried allowAdditions?
allowAdditions : Whether search selection should allow users to add their own selections, works for single or multiselect.
http://semantic-ui.com/modules/dropdown.html#frequently-used-settings
also, usage questions should probably be asked in the forum http://forums.semantic-ui.com/ or http://stackoverflow.com/
Hi @Boasbabs, you might also want to validate your use case properly; someone did a demo to showcase his problem with such validation, and if I didn鈥檛 miss anything, here鈥檚 the gist of it:
$('.ui.dropdown').dropdown({
allowAdditions: true,
apiSettings: {
response: {
success: true,
results: [
{
'name': '[email protected]',
'value': '[email protected]'
},
{
'name': '[email protected]',
'value': '[email protected]'
},
]
},
},
hideAdditions: false,
minCharacters: 3,
showNoResults: true,
// We use `onLabelCreate` callback to instantly remove invalid e-mail addresses:
onLabelCreate: function(value, text) {
if (!is_valid_email(value)) {
window.setTimeout(function() {
$('#users_dd')
.dropdown('remove selected', value)
}, 0)
}
return $(this)
},
})
// Just basic email validation
function is_valid_email(email) {
var re = /\S+@\S+\.\S+/
return re.test(email)
}
Thank you for posting, but although it鈥檚 a valid usage question, we鈥檝e limited GitHub Issues to bug reports and feature requests, keeping the board more manageable for maintainers; see the contributing guidelines for more information on what kind of posts should find themselves into the GitHub Issues board.
To get answers or feedback that might allow you to repost this issue, please use one of our other support resources:
Thank you everyone for the quick response.
I added this hideAdditions: false and it worked