Vue-multiselect: Is tagging possible?

[boris-glumpler]

Good work, looks really great!
Was just wondering if tagging is possible, so creating an item that is not already available in the options.

[shentao]

Thanks @shabushabu!

Sadly, tagging is not possible right now.
But now that you mention it, I think this would make a perfect case for another mixin, that would extend the functionality.

So let’s try to describe it:

We have a list of available tags, that you can select, but if you search for something that is not on the list, the current notification asks you to change the search query.
With tagging feature available, it would ask you to press enter to add such option to the options list through a callback function, passing the search query as param.

There are some edge-cases there though. Like you want to add the tag: vue, while still having the option vuejs that would be matched, so probably we would need a persistent option at the end of the options list to trigger the tagging callback.

Would such functionality be enough? Or do you have something else in mind?

[boris-glumpler]

That sounds great! Couldn't have described it better.

[evertramos]

Hi @shentao,

Nice component! Thanks for sharing.

Reagarding the tags, I have a suggestion, if you consider valid.

1. Normally with tag we have an option to make it become the green nice block, using a comma (",") or maybe semicolon (";"). Space are no a good option, because could have a space in someones tag;
2. In my dummy point of view, when you enter a tag, it could only brings the format of a selection and then when you submit the form it would give me an array in return with the text or id->text with empty id when newly added.

No sure if I could make myself clear, but something like that, writen in jQuery:

http://aehlke.github.io/tag-it/

Thanks!

[shentao]

Hey @evertramos @shabushabu, I've created a (very work in progress) draft of tagging on the branch #14. Run it locally if you like and let me know what do you think!

Cheers!

[boris-glumpler]

Great, cheers! I'll take it for a spin tomorrow.

[evertramos]

@shentao sorry man... I am too newbie... Could not test it, even subsituing the folder in my node_modules, or trying to run in the same forlder of my component I got this error:

{ [Error: Couldn't find preset "stage-2" relative to directory "C:\\src\\node_modules\\vue-multiselect" while parsing file: C:\src\node_modules\vue-multiselect\src\mixins\pointerMixin.js]
  filename: 'C:\\src\\node_modules\\vue-multiselect\\src\\mixins\\pointerMixin.js',

Here is my component:

<script>
    import Multiselect from 'vue-multiselect'
    // import Multiselect from './vue-multiselect'

    export default {

        components: { 
            Multiselect 
        },

        data () {
            return {
                selected: null,
                source: [
                    'Item 1', 
                    'Item 2', 
                    'Test 1',
                    'Test 2',
                ]
            }
        }
    }
</script>

<template>
  <div>
    <multiselect 
        :options="source",
        :selected.sync="multiValue",
        :multiple="true",
        :searchable="true",
        placeholder="Pick some",
        label="name",
        :close-on-select="true"
        key="name"
        placeholder="Selecione as opções" 
        >
    </multiselect>
  </div>
</template>

<!-- source: https://github.com/monterail/vue-multiselect -->

Sorry... If you could tell me how to test it, I will do it with great pleasure.

Best regards

[boris-glumpler]

Seems like there's currently no flag to enable tagging, so it should be on by default, right? Looking over the code it seems that the tag delimiter would be a semi-colon, but unfortunately, I couldn't get a tag to appear. Am I missing something?

[shentao]

It is the example at the top in the documentation (available @ localhost:8080) when running npm run dev. I will improve the example today/tomorrow evening.
See the props list in Multiselect.vue.

[boris-glumpler]

Got it up and running and it works really well. Didn't get it running in my project cause of the missing onTagging method. I'm happy with it.

Do you plan on adding a flag to allow tagging and move the onTagging method into the component or are we gonna have to declare onTagging ourselves?

[shentao]

I think that adding tags to the options list is a bit beyond the component responsibility.
It might be a simple .push() with Arrays with primitive values only, however this would fail miserably if your Array contains Objects, where the tag label (the one you type into search), is just one of the keys.

Imagine a options list like this: [{ tag: "label", userCreated: true }, { tag: "otherLabel", userCreated: false }]

Doing assumtions on how to add such tag or if we even should add the tag is way beyond the component. That’s why I think it is safe to provide just a callback for it. This way the validation, async requests and so on are left to the developer.

[boris-glumpler]

Ok, fair enough. Easy enough to do.

[shentao]

@shabushabu @evertramos
Merged and available in v0.2. Hope it works for you! :)