shentao / vue-multiselect

Universal select/multiselect/tagging component for Vue.js
https://vue-multiselect.js.org/
MIT License
6.66k stars 989 forks source link

[Question] Add class to multiselect when noResult #1640

Open bogdan0083 opened 1 year ago

bogdan0083 commented 1 year ago

Hey guys! Is it possible to add class to multiselect element when search found no results?

I want to hide dropdown completely when nothing is found. For this multiselect--no-result class would be super useful.

akki-jat commented 1 year ago

@bogdan0083 You have the visibility of options as you are passing the same to the vue-multiselect, so you can watch options array and when it is empty you can hide the dropdown or add the class.

bogdan0083 commented 1 year ago

@bogdan0083 You have the visibility of options as you are passing the same to the vue-multiselect, so you can watch options array and when it is empty you can hide the dropdown or add the class.

@akki-jat I want to add class ONLY when I use search in multiselect with some query and search didn't find any results. I don't need to watch array of options. Let's say I have the following options:

USA
Mexico
Netherlands

And I type ASDFD in search field. The results will be empty obviously but how do I add class only when nothing is found on search? Can you give me an example please?

akki-jat commented 1 year ago

@bogdan0083 You can listen to @search-change listener (https://vue-multiselect.js.org/#sub-events) and do a query on you side and update the class by yourself.

For example - https://codesandbox.io/s/vue-multiselect-class-no-result-ulj3hn

But I see that it will be good to add the class on our side, so reopening the issue.