Question: can vue-multiselect handle large (2000+ entries) lists?

Hey! Just a quick question.

Context: I’m working on an SPA using React at the moment, but Vue 2.0 looks very appealing and I’m thinking of switching while the app is still small enough. However, there is one input component that is critical for our application; you guessed it: multi-select.

Our users need to be able to quickly select multiple out of literally thousands of options. So type-to-find and autocomplete is crucial, and it needs to perform well with these huge lists. In React we’re currently using react-virtualized-select with react-select-fast-filter-options.

Like I said, this is pretty much the only thing “binding” us to React at the moment, and since this isn’t the most common use-case out there I can imagine if vue-multiselect isn’t currently made to handle it, but maybe I’m lucky and it already works? In every other respect it looks like a perfect match for our needs.

Thanks, keep up the good work! /Job

[shentao]

Hey @JobLeonard!

Vue 2.0 is really awesome! I too, would like to migrate the current app that I’m working on. Sadly it’s already quite large, so it’s hard to find the time for it.

Anyway, I’m not a big fan of the way react-virtualized-select handles those amounts of options. Sure, virtualization is cool, but it will probably only impress other developers. Even if it can handle thousands of options I believe that virtualization is completely unnecessary. I mean – who is going to scroll through all those options? The user experience doesn’t get better this way.

The key here is – like you said – effective filtering/searching, but this is something JavaScript does pretty well, even without such libraries like js-search (which is what react-select-fast-filter-options uses internally).

Knowing this, there is a simple solution for this problem, which is basically limiting the options that are displayed. Vue-multiselect 1.x already has the functionality for it, for example, setting :options-limit="200" will result in displaying only the first 200 options that match the search query. And that’s basically it.

I just made a quick test drive with the 2.0-beta version with 24300 options (world countries JSON times 100), :options-limit="300" and it works flawlessly using the internal filtering mechanism. Also added the functionality to the 2.0-beta branch, as it was missing (thanks for bringing this subject!), it should be released today evening.

Additionally vue-multiselect also supports disabling the local search (:local-search="false" prop) and emitting the current search phrase with @search-change="searchHandler". This makes it further possible to provide your own search engine. This is how the ajax example in the docs actually works.

You could, for example, return most likely to be correct options on top based on popularity or user’s previous searches. Or supporting more than just simple text search, for example, if you’re searching for movies you could do '#superhero +2010' to return only movies made after 2010, with the #superhero tag.

This would probably bring much better user experience than just the ability to scroll through 5k of options.

I hope this helps with the decision. 😃

Useful links: http://monterail.github.io/vue-multiselect/#ajax http://monterail.github.io/vue-multiselect/#props

[JobLeonard]

Well, migration will take a while before I can actually get around to testing this, but I’ll let you know if it works out 😃