Hello,
I am trying to add options dynamically if the search does not yield results.
The first obvious question is if there is already a built-in function, if it doesn’t exist I started creating my own, but I’m stuck.
I started by adding “on search” to the smartSelect, but I would like to understand how to return true / false based on whether the search found something or not.
My code at moment:
let smartSelectemail = $f7.smartSelect.create({
el: element,
....
searchbar: {
on: {
search(sb, query, previousQuery) {
console.log(sb, query, previousQuery); // how i can check here the result of search?
}
}
},
....
});
I did it myself, I write it for the community:
let smartSelectemail = $f7.smartSelect.create({
....
searchbar: {
on: {
search(sb, query, previousQuery) {
if (sb.searchContainer.innerText === "") {
var value = $f7.validateEmail(query);
if (value) {
var addOptions = document.createElement("button");
addOptions.id = 'testAdd';
addOptions.textContent = 'Inserisci email';
addOptions.classList.add('button');
addOptions.classList.add('button-fill');
document.querySelector('[data-name="smart-select-page"]').querySelector('.page-content').appendChild(addOptions);
addOptions.addEventListener('click', () => {
document.querySelector('a[data-mail] > select').innerHTML += '<option>' + query + '</option>';
document.querySelector('[data-name="smart-select-page"] > .page-content > .list > ul').innerHTML += '<li class=""><label class="item-radio item-content"><input type="radio" name="radio-cab23f82db" value="' + query + '"><i class="icon icon-radio"></i><div class="item-inner"><div class="item-title">' + query + '</div></div></label></li>';
});
} else {
const button = document.querySelector('#testAdd');
if (button) {
button.remove();
}
}
}
}
}
}
In my case i need to add an email, so i test if search have result or not with sb.searchContainer.innerText, if is empty (so query not match) i validete if input value is an email, if true will add a button for insert email into <li> and <select>, if not match, i will remove button if exist.