Autocomplete with select

[LusenkoSasha]

[Tirke]

As #121 suggests, there is a need for a select component with more powerful abilities while keeping the current autocomplete features like templating and searching. Making a generic multiselect component loaded with useful features is not an easy task and we already have some great options available (vue-multiselect is one).

Regarding your issue , I think you can already simulate a select with a <b-autocomplete> and v-model.

[jtommy]

@LusenkoSasha It's just like @Tirke said about autocomplete component

[JoshZA]

👍 for this feature

[ivalkenburg]

Would love select with autocomplete features as well

[dumptyd]

@Tirke Could you please make a fiddle or just tell me how you'd simulate select+search with b-autocomplete?

[Tirke]

@dumptyd

I'm sorry I don't have a lot of time to provide a fiddle, but basically you juste use v-model to simulate the select and you use existing search features of the autocomplete component to achieve search.

This is not at all a fully featured select but you'll have something working. If you want something more useful I highly suggest looking at vue-multiselect or other projects.

[johnpyp]

The only other feature I would want for the current autocomplete is the ability to have the results show when the person hasn't typed anything. Show all the data just sorted alphabetically. Currently, this same result can be achieved by just putting in a letter that doesn't fit any of the data. However, I would like this just on focus.

[jtommy]

@johnpyp We are working on it!

[johnpyp]

Good to hear! Not a super big deal, but it would be a great feature :)

…

On Jan 25, 2018 7:48 AM, "Walter Tommasi" ***@***.***> wrote: @johnpyp <https://github.com/johnpyp> We are working on it! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#222 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ATq45ExluZYQvfSoiGLUZlnax1eOVPbwks5tOHgDgaJpZM4OtaP_> .

[gfviegas]

@Tirke of course there's components that has this feature around the web, but we are using buefy for a reason, right?

Buefy components have the look and feel that we seek in bulma and we follow all the patterns of buefy components (same attributes, the b-field "integration", etc...).

It sucks using vue-multiselect with buefy forms.. it breaks the form since it has a different stylesheet (and "feel"), we can't integrate our variables with it, and it doesn't even have SASS to customize it, there's not the state classes, icons, etc... it's a pain every time.

And I think the current b-select might as well just be improved to support this functionality

[Tirke]

@gfviegas

Yeah, of course in an ideal world b-select should provide this functionality. But when you have deadlines and you need to ship a product you don't always have the choice of waiting on Buefy dev team. And Buefy dev team is not the most active and it's not the healthiest open source project. Just look at element or vuetify if you want to see what I consider an healthy open source project.
I'm not saying that to discredit Buefy, I think that Buefy is really great, but I also think that it will take time (maybe a lot) before we see a solid multi b-select.

Providing a good multiselect component is hard, and time consuming. Just look at vue-multiselect history. I'm just trying to provide a solution here, and I repeat myself but waiting is not always one.

And about using vue-multiselect with buefy forms, what you are saying is just not true. We shipped a product in September with Buefy + vue-multiselect used in many forms and it took me ~1 hour to have something looking exactly like Buefy b-select.

[rafaberaldo]

You can now use autocomplete with open-on-focus prop to work like a custom select (and it now has scrollbars).

[dumptyd]

Awesome! Thanks.

[aantn]

I would also like this.

@rafaelpimpa that is a good solution but it doesn't work for multiselect.

[jtommy]

@aantn there is tagsinput

[aantn]

Hi @jtommy , thank you for the fast response.

I've tried using tagsinput but it isn't appropriate for my use case. The user can choose many tags and displaying all the chosen tags takes up too much space on the screen. A UI like multi-select works better because the chosen tags are shown only when opening the multi-select.

I would be happy to open a PR for this myself, but I would like some direction on how to handle it. Should this be an extension of multi-select? Should it be part of dropdown? Should it be part of autocomplete?

[jtommy]

Can you make an example?

[aantn]

[aantn]

What I'm trying to create here is three smallish filters aligned on the right side of the page.

[jtommy]

Ok, but what's the problem with tag? I need an example of UI/UX

[aantn]

Sure, this is what I've implemented so far. I would love to add search field for the dropdown on top of this.

Right now I'm wrapping Dropdown with my own component to implement this.

[aantn]

Just to clarify, that dropdown is only shown when the users clicks on the filter menu.

[jtommy]

Ok, then the dropdown multiple is the best option for you