Merge pull request #60 from Ku3mi41/feature/debounced-search

feat: debounced search

src/components/search/DebouncedSearchBox.vue

@@ -0,0 +1,66 @@
+<template>
+  <q-input
+    v-model="query"
+    @clear="clear"
+    dense
+    autofocus
+    outlined
+    type="search"
+    clearable
+    clear-icon="close"
+    placeholder="Search...">
+    <template v-slot:prepend>
+      <q-icon name="search" />
+    </template>
+  </q-input>
+
+</template>
+
+<script>
+
+import { connectSearchBox } from 'instantsearch.js/es/connectors';
+import { createWidgetMixin } from 'vue-instantsearch/vue3/es';
+
+export default {
+  mixins: [createWidgetMixin({ connector: connectSearchBox })],
+  props: {
+    delay: {
+      type: Number,
+      default: 200,
+      required: false,
+    },
+  },
+  data() {
+    return {
+      timerId: null,
+      localQuery: '',
+    };
+  },
+  unmounted() {
+    if (this.timerId) {
+      clearTimeout(this.timerId);
+    }
+  },
+  methods: {
+    clear() {
+      this.query = '';
+    }
+  },
+  computed: {
+    query: {
+      get() {
+        return this.localQuery;
+      },
+      set(val) {
+        this.localQuery = val;
+        if (this.timerId) {
+          clearTimeout(this.timerId);
+        }
+        this.timerId = setTimeout(() => {
+          this.state.refine(this.localQuery);
+        }, this.delay);
+      },
+    },
+  },
+};
+</script>

src/components/search/SearchInstantSearch.vue

@@ -6,7 +6,9 @@
     :middlewares="middlewares"
   >
     <ais-configure :hits-per-page.camel="12" />
-    <ais-search-box placeholder="" />
+    <ais-search-box index-name="instant_search" :search-client="searchClient">
+      <debounced-search-box />
+    </ais-search-box>
     <ais-stats></ais-stats>
     <ais-current-refinements />
 
@@ -71,12 +73,13 @@
 
 <script lang="ts">
 import SearchResultItem from 'src/components/search/SearchResultItem.vue';
+import DebouncedSearchBox from 'src/components/search/DebouncedSearchBox.vue';
 import TypesenseInstantSearchAdapter from 'typesense-instantsearch-adapter';
 import { CollectionSchema } from 'typesense/lib/Typesense/Collection';
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-  components: { SearchResultItem },
+  components: { SearchResultItem, DebouncedSearchBox },
   name: 'SearchInstantSearch',
   data() {
     const data = {