Vue-multiselect: multi search

[nunob87]

hello,

How do I ignore the accents in the search ??

How do I search fields in json fields ??

thank you

[shentao]

Add :internal-search="false" and filter the options by yourself using the @search-change event.
Example: http://monterail.github.io/vue-multiselect/#sub-asynchronous-select

[patie]

@shentao this should be nice feature imho, one more options for ignore accents, we have multiple options, and adding v-model, @search-change etc for each is little messy, what you think?

[csicky]

@shentao
Would be great to have this as an option. I too use the @search-change but in a form with many fields and many Multiselect components it makes so much noise. On your side it would be only to pass the query to https://lodash.com/docs/4.17.11#deburr before going on with the search.

Other topic, saw you at the Amsterdam Vue conference in February, your talk was very interesting. Thank you for this great component.

[shentao]

Hey! If you have this problem repeatedly, I would suggest creating a proxy component on top of VueMultiselect that forwards most of the props and listeners and adds the :internal-search="false" and @search-change listener to filter out options.
You could also create your own version of Multiselect, by extending the component and making the required changes.

Also thanks @csicky!

[csicky]

Thank you for the tip, I'm already doing just that. I just wanted to write about this here so that you know that there are users who need this. If you ever find yourself wondering what feature to add next to Multiselect, this one might be just the thing :)

[shentao]

So my idea for the v3 is to actually limit the features/API so there is less code to maintain since this is really a pain now... But at the same time, make it easier to extend, compose and modify the behavior so that it opens completely new possibilities without increasing the complexity of the component itself.

[joffreyBerrier]

Hi @csicky & @patie & @nunob87

If you do not wait until the merge, you can use this code

<multiselect
  :ref="`multiselect-${index}`"
  @search-change="ignoreAccent(`multiselect-${index}`)"
>
</multiselect>

ignoreAccent(elem) {
  this.$refs[elem][0].search = this.$refs[elem][0].search.normalize('NFD').replace(/[\u0300-\u036f]/g, "")
}

That clean key search contains on the Multiselect component 👍

[lucianobosco]

Add :internal-search="false" and filter the options by yourself using the @search-change event.
Example: http://monterail.github.io/vue-multiselect/#sub-asynchronous-select

Thanks! I've been struggling with this for a few hours until I found this thread.
My Axios response returns the correct array of elements to show but for some reason, those containing accents weren't showing in the dropdown suggestions list.
As the documentation says, if you are looking into a specific field the :internal-search="false" option must be used.
Hope this helps anyone else in the future

[Glideh]

For a diacritic/case insensitive search (considering the "needle" AND the "haystack") here is what I ended up with:

<multiselect
  :options="filteredOptions"
  :internal-search="false"
  @search-change="searchChange"
>

function removeDiacritics(text) {
  return text.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
}

function normalizedContains(needle, haystack) {
  const regExp = new RegExp(removeDiacritics(needle), 'gi');
  return regExp.test(removeDiacritics(haystack));
}

const fullOptions = [
  'Chouétte',
  'Chouètte',
  'Choüette',
  'chÔuette',
];

export default {
  data() {
    return {
      fullOptions,
      filteredOptions: fullOptions
    }
  },
  methods: {
    searchChange(search) {
      this.filteredOptions = search
        ? this.fullOptions.filter(option => normalizedContains(search, option))
        : this.fullOptions;
    }
  }
//...

Typing "cho" will match all the options.

Would need some tuning to get a generic implementation until we get a native option