Clear autocomplete multiple selections using a button click without having to open the popup page again

I have a multiple autocomplete that open the search bar and selection in a popup
I have multiple options selected and I want to clear all those selections after they were selected but without having to open again the popup but using a clear button, I have not found any clear button for the autocomplete selections but only after opened in a popup and I type there something to search…

I am using this code below to clear all values with a button click but I get these errors:

code:

var autocomplete = app.autocomplete.get('#autocomplete-standalone-multiple');
autocomplete.value=[];
autocomplete.updateValues();   

errors:

Is there a way to clear all selections of autocomplete multiple without having to open the popup page with a button click?

My code above gives me only that error!

thanks for the tips!

Is there updateValues method on autocomplete component? I can’t find it on docs. Maybe you can remove it, and just use autocomplete value property

1 Like

I found somewhere that there is in fact UpdatesValues inside the autocomplete-class.js but it does not work as I thought, so I can clear the values selected and yes
not problem so far by using

autocomplete.value=[];

but updateValues() does not work

autocomplete.updateValues(); 

So I ended up now using this code manually trying to clear the text inside item-after but anyway the text inside item-after is not cleared

var ac = app.autocomplete.get('#autocomplete-standalone-multiple');
ac.value=[];
$('#autocomplete-standalone-multiple .item-after').html(''); //does not clear the item-after text
$('#autocomplete-standalone-multiple .item-after').innerHTML = ''; //does not clear the item-after text 

no errors whatsoever in the console but it does not clear item-after text, do not know why because if I type this code in the console item-after text is cleared!

In this link Vladimir talks about using updateValues with a multiple autocomplete that it is my case:

:frowning:

Do you get the html element of $('#autocomplete-standalone-multiple .item-after')? In my case, I need to use find('item-after')

1 Like

Yes I get the html element from it but is not cleared if I put the code inside f7 code but if I test it in the console it works!

In your case with .find according DOM it is supposed to work like this:
https://framework7.io/docs/dom7.html

$('#autocomplete-standalone-multiple').find('.item-after').text('');

Well I got it working using this, it seems html(’’) does not do anything or innerHTML = either but with .text() in combination with .find it clears me the item-after text finally…

I also added self to autocomplete when creating it:

self.autocompleteStandaloneMultiple = app.autocomplete.create({
...

and then

var autocomplete = app.autocomplete.get('#autocomplete-standalone-multiple');
autocomplete.value=[];
self.$('#autocomplete-standalone-multiple').find('.item-after').text('');

now it clears the text inside item-after perfectly!

Anyway I do not know why Vladimir mentioned to use also autocomplete.updateValues because it does not work at least for me but I found that solution above!

regards! :slight_smile:
Happy ending!

2 Likes