strict prop #82

README.md

@@ -368,6 +368,7 @@ Join our [Discord channel](https://discord.gg/WhX2nG6GTQ) or [open an issue](htt
 | **noOptionsText** | `string` | `'The list is empty'` | The text that should be displayed when options list is empty. |
 | **noResultsText** | `string` | `'No results found'` | The text that should be displayed when there are no search results. |
 | **openDirection** | `string` | `bottom` | Whether the option list should be displayed above or below the multiselect. Possible values: `top\|bottom` |
+| **strict** | `boolean` | `true` | Whether should regard accents/diacritics in search. |
 | **classes** | `object` | | An object of class names that gets merged with the default values. Default: `{`<br>&nbsp;&nbsp;`container: 'multiselect',`<br>&nbsp;&nbsp;`containerDisabled: 'is-disabled',`<br>&nbsp;&nbsp;`containerOpen: 'is-open',`<br>&nbsp;&nbsp;`containerOpenTop: 'is-open-top',`<br>&nbsp;&nbsp;`containerActive: 'is-active',`<br>&nbsp;&nbsp;`singleLabel: 'multiselect-single-label',`<br>&nbsp;&nbsp;`multipleLabel: 'multiselect-multiple-label',`<br>&nbsp;&nbsp;`search: 'multiselect-search',`<br>&nbsp;&nbsp;`tags: 'multiselect-tags',`<br>&nbsp;&nbsp;`tag: 'multiselect-tag',`<br>&nbsp;&nbsp;`tagDisabled: 'is-disabled',`<br>&nbsp;&nbsp;`tagRemove: 'multiselect-tag-remove',`<br>&nbsp;&nbsp;`tagRemoveIcon: 'multiselect-tag-remove-icon',`<br>&nbsp;&nbsp;`tagsSearch: 'multiselect-tags-search',`<br>&nbsp;&nbsp;`placeholder: 'multiselect-placeholder',`<br>&nbsp;&nbsp;`caret: 'multiselect-caret',`<br>&nbsp;&nbsp;`caretOpen: 'is-open',`<br>&nbsp;&nbsp;`clear: 'multiselect-clear',`<br>&nbsp;&nbsp;`clearIcon: 'multiselect-clear-icon',`<br>&nbsp;&nbsp;`spinner: 'multiselect-spinner',`<br>&nbsp;&nbsp;`dropdown: 'multiselect-dropdown',`<br>&nbsp;&nbsp;`dropdownTop: 'is-top',`<br>&nbsp;&nbsp;`options: 'multiselect-options',`<br>&nbsp;&nbsp;`optionsTop: 'is-top',`<br>&nbsp;&nbsp;`option: 'multiselect-option',`<br>&nbsp;&nbsp;`optionPointed: 'is-pointed',`<br>&nbsp;&nbsp;`optionSelected: 'is-selected',`<br>&nbsp;&nbsp;`optionDisabled: 'is-disabled',`<br>&nbsp;&nbsp;`optionSelectedPointed: 'is-selected is-pointed',`<br>&nbsp;&nbsp;`optionSelectedDisabled: 'is-selected is-disabled',`<br>&nbsp;&nbsp;`noOptions: 'multiselect-no-options',`<br>&nbsp;&nbsp;`noResults: 'multiselect-no-results',`<br>&nbsp;&nbsp;`fakeInput: 'multiselect-fake-input',`<br>&nbsp;&nbsp;`spacer: 'multiselect-spacer'`<br>`}` |
 
 ### Advanced Props

src/Multiselect.d.ts

@@ -38,6 +38,7 @@ declare class Multiselect extends Vue {
   openDirection?: 'top'|'bottom';
   nativeSupport?: boolean;
   classes?: object;
+  strict?: boolean;
 
   $emit(eventName: 'change', e: {originalEvent: Event, value: any}): this;
   $emit(eventName: 'select', e: {originalEvent: Event, value: any, option: any}): this;

src/Multiselect.vue

@@ -351,7 +351,12 @@
         type: Object,
         required: false,
         default: () => ({})
-      }
+      },
+      strict: {
+        type: Boolean,
+        required: false,
+        default: true,
+      },
     },
     setup(props, context)
     { 

src/composables/useClasses.js

@@ -74,7 +74,7 @@ export default function useClasses (props, context, dependencies)
       tagRemoveIcon: classes.tagRemoveIcon,
       tagsSearchWrapper: classes.tagsSearchWrapper,
       tagsSearch: classes.tagsSearch,
-      tagsSearchCopy: classes.tagsSearchWrapperCopy,
+      tagsSearchCopy: classes.tagsSearchCopy,
       placeholder: classes.placeholder,
       caret: [classes.caret]
         .concat(isOpen.value ? classes.caretOpen : []),

src/composables/useOptions.js

@@ -10,7 +10,7 @@ export default function useOptions (props, context, dep)
     options, mode, trackBy, limit, hideSelected, createTag, label,
     appendNewTag, multipleLabel, object, loading, delay, resolveOnLoad,
     minChars, filterResults, clearOnSearch, clearOnSelect, valueProp,
-    canDeselect, max
+    canDeselect, max, strict,
   } = toRefs(props)
 
   // ============ DEPENDENCIES ============
@@ -73,7 +73,7 @@ export default function useOptions (props, context, dep)
 
     if (search.value && filterResults.value) {
       fo = fo.filter((option) => {
-        return normalize(option[trackBy.value]).indexOf(normalize(search.value)) !== -1
+        return normalize(option[trackBy.value], strict.value).indexOf(normalize(search.value, strict.value)) !== -1
       })
     }
 

src/utils/normalize.js

@@ -1,3 +1,5 @@
-export default function normalize (str) {
-  return String(str).toLowerCase().trim()
+export default function normalize (str, strict = true) {
+  return strict
+    ? String(str).toLowerCase().trim()
+    : String(str).normalize('NFD').replace(/\p{Diacritic}/gu, '').toLowerCase().trim()
 }