Make autocomplete work with (fuzzysearch) custom filter

[polger]

I have tried for half a day to put the pieces together, but still cannot make autocomplete work with fuzzysearch custom filter.

This is the custom filter sample code in the autocomplete docs

<template>
  <q-search v-model="terms">
    <!-- Provide custom filter function -->
    <q-autocomplete
      :filter="myFilter"
      @search="search"
      @selected="selected"
    />
  </q-search>
</template>
<script>
// fuzzysearch (needle, haystack) { return true|false }
export default {
  ...,
  methods: {
    myFilter(terms, { field, list }) {
      const token = terms.toLowerCase();
      return list.filter(item => fuzzysearch(token, item[field].toLowerCase()));
    }
  }
}
</script>

But the showcase doesn’t provide a full example for custom filter. From the search function in the showcase, I tried this search function.

search (terms, done) {
      done(filter(terms, {
        field: 'label',
        list: [
          {value: 'value1', label: 'label of value1'},
          {value: 'value2', label: 'label of value2'}
        ]
      }))
    }

but then myFilter is not used, instead, quasar’s default filter function is used, which has no fuzzy search, so there’s no match for ‘ble of val’ for example.

If search function is

search (terms, done) {
      done(this.myFilter(terms, {
        field: 'label',
        list: [
          {value: 'value1', label: 'label of value1'},
          {value: 'value2', label: 'label of value2'}
        ]
      }))
    }

then I get error “search”: “TypeError: Object(…) is not a function” found in —> <QAutocomplete>

I have tried countless other alternatives than the ones posted here. What is missing?

Has anyone got this working?

Regards.

[polger]

“Object(…) is not a function” error was due to incorrectly importing fuzzysearch as named import instead of default import.

If you follow the showcase code, you should NOT import quasar’s filter function. Search function has to include “done(this.myFilter)” instead of “done(filter)”