From 594fd95f7cfcbb4624e111281251e2aae3cc0dea Mon Sep 17 00:00:00 2001
From: Chrissi2812 <cf@pixel-kraft.de>
Date: Wed, 8 Jul 2020 17:54:30 +0200
Subject: [PATCH] use async items and filter in suggestion example

---
 .../Components/Routes/Suggestions/index.vue   | 23 +++++++++++++------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/examples/Components/Routes/Suggestions/index.vue b/examples/Components/Routes/Suggestions/index.vue
index 7abfb28d7..1fe71e9d8 100644
--- a/examples/Components/Routes/Suggestions/index.vue
+++ b/examples/Components/Routes/Suggestions/index.vue
@@ -63,12 +63,17 @@ export default {
           new Heading({ levels: [1, 2, 3] }),
           new Mention({
             // a list of all suggested items
-            items: () => [
-              { id: 1, name: 'Philipp Kühn' },
-              { id: 2, name: 'Hans Pagel' },
-              { id: 3, name: 'Kris Siepert' },
-              { id: 4, name: 'Justin Schueler' },
-            ],
+            items: async () => {
+              await new Promise(resolve => {
+                setTimeout(resolve, 500)
+              })
+              return [
+                { id: 1, name: 'Philipp Kühn' },
+                { id: 2, name: 'Hans Pagel' },
+                { id: 3, name: 'Kris Siepert' },
+                { id: 4, name: 'Justin Schueler' },
+              ]
+            },
             // is called when a suggestion starts
             onEnter: ({
               items, query, range, command, virtualNode,
@@ -124,11 +129,15 @@ export default {
             // this function is optional because there is basic filtering built-in
             // you can overwrite it if you prefer your own filtering
             // in this example we use fuse.js with support for fuzzy search
-            onFilter: (items, query) => {
+            onFilter: async (items, query) => {
               if (!query) {
                 return items
               }
 
+              await new Promise(resolve => {
+                setTimeout(resolve, 500)
+              })
+
               const fuse = new Fuse(items, {
                 threshold: 0.2,
                 keys: ['name'],