Create a Select with Search area inside, as "Chosen JS"

[valeriosillari]

I would like to set a search area inside the select (single select I would say), as in the chosenJS layout (see attachment below), but not in the "input area" (by default in vue-multiselect).

The reason: I've got a list of 100 items and I need to search into it, and by design it should be displayed more or less as in the chosenJS design above.

I'm not sure if I can use the option "searchable" or not, neither how to add a form inside the select itself. I guess I have to play with slots and events, disabling some default ones and set my custom ones. But I got some issues with it and I did not find any examples/code snippets to help me in my purpose.

So I would like to ask:

1. is it possible?
2. there is an example or code snippet as reference?
3. is it also a question for vue-multiselect or is off-topic?

Here a JSFiddle with some basic steps I've done, but as you can see it's not working: you cannot event interact with the form with the input. https://jsfiddle.net/stellavalerio/53vzkod8/33/

Please help me :)

[CosyStudios]

I'll post an update and sketch when im done but intending to do the same here. As a potential solution in mind, im creating my own additional input field in the beforeList slot, disabling the internal search and then setting this.$refs.select.search (where select is the multiselect component) to my contents of my custom input field

Does that sound viable?

[RAHMANIABOUBEKER]

Hello,

Any update please ?