docs(filtering): Add Filtering Docs (#1017)

docs(infinite-scroll): improve example (#1017)

docs/.vuepress/components/ClearButtonOverride.vue

@@ -1,9 +1,10 @@
 <template>
   <div>
     <v-select
+            placeholder="choose a country"
             v-model="selected"
-            :options="['Canada', 'United States']"
             :components="{Deselect}"
+            :options="['Canada', 'United States']"
     />
   </div>
 </template>

docs/.vuepress/components/FuseFilter.vue

@@ -0,0 +1,31 @@
+<template>
+  <v-select :filter="fuseSearch" :options="books" :getOptionLabel="option => option.title">
+    <template #option="{author, title}">
+      {{ title }} <br>
+      <cite>{{ author.firstName }} {{ author.lastName }}</cite>
+    </template>
+  </v-select>
+</template>
+
+<script>
+import Fuse from 'fuse.js';
+import books from '../data/books';
+
+export default {
+  computed: {
+    books: () => books,
+  },
+  methods: {
+    fuseSearch (options, search) {
+      const fuse = new Fuse(options, {
+        keys: ['title', 'author.firstName', 'author.lastName'],
+        shouldSort: true,
+      });
+      return search.length ? fuse.search(search) : fuse.list;
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>

docs/.vuepress/components/InfiniteScroll.vue

@@ -5,7 +5,6 @@
     @open="onOpen"
     @close="onClose"
     @search="query => search = query"
-    ref="select"
   >
     <template #list-footer v-if="hasNextPage">
       <li ref="load" class="loader">
@@ -17,16 +16,16 @@
 
 <script>
 import countries from '../data/countries';
-import vSelect from '../../../src/components/Select'
 
 export default {
   name: "InfiniteScroll",
-  components: {vSelect},
+  data () {
-  data: () => ({
+    return {
-    observer: null,
+      observer: new IntersectionObserver(this.infiniteScroll),
-    limit: 10,
+      limit: 10,
-    search: ''
+      search: ''
-  }),
+    }
+  },
   computed: {
     filtered () {
       return countries.filter(country => country.includes(this.search));
@@ -35,12 +34,9 @@ export default {
       return this.filtered.slice(0, this.limit);
     },
     hasNextPage () {
-      return this.paginated.length + 10 < this.filtered.length;
+      return this.paginated.length < this.filtered.length;
     },
   },
-  mounted () {
-    this.observer = new IntersectionObserver(this.infiniteScroll);
-  },
   methods: {
     async onOpen () {
       if (this.hasNextPage) {

docs/.vuepress/components/Sandbox.vue

@@ -226,11 +226,6 @@ export default {
           loading(false);
         });
     }, 250),
-    fuseSearch (options, search) {
-      return new Fuse(options, {
-        keys: ['title', 'author.firstName', 'author.lastName'],
-      }).search(search);
-    },
   },
 };
 </script>

docs/.vuepress/config.js

@@ -131,7 +131,8 @@ module.exports = {
           collapsable: false,
           children: [
             ['guide/keydown', 'Keydown Events'],
-            ['guide/positioning', 'Dropdown Position']
+            ['guide/positioning', 'Dropdown Position'],
+            ['guide/filtering', 'Option Filtering'],
           ],
         },
         {

docs/guide/filtering.md

@@ -0,0 +1,19 @@
+Vue Select provides two props accepting `functions` that can be used to implement custom filtering
+algorithms.
+
+- `filter` <Badge text="v2.5.0+" />
+- `filterBy` <Badge text="v2.5.0+" />
+
+By default, the component will perform a very basic check to see if an options label includes
+the current search text. If you're using scoped slots, you might have information within the
+option templates that should be searchable. Or maybe you just want a better search algorithm that
+can do fuzzy search matching.
+
+## Filtering with Fuse.js
+
+You can use the `filter` and `filterBy` props to hook right into something like
+[Fuse.js](https://fusejs.io/) that can handle searching multiple object keys with fuzzy matchings.
+
+<FuseFilter />
+
+<<< @/.vuepress/components/FuseFilter.vue

docs/guide/infinite-scroll.md

@@ -4,8 +4,8 @@ by hooking into the `open`, `close`, and `search` events, along with the `filter
 
 Let's break down the example below, starting with the `data`.
 
-- `observer` - when the component is mounted, a new `IntersectionObserver` will be set here
+- `observer` - a new `IntersectionObserver` with `infiniteScroll` set as the callback
-- `limit` - the number of options to display 'per page'
+- `limit` - the number of options to display
 - `search` - since we've disabled Vue Selects filtering, we'll need to filter options ourselves
 
 When Vue Select opens, the `open` event is emitted and `onOpen` will be called. We wait for