Add search function in searchbar

components/index/test.json

@@ -0,0 +1,4 @@
+{
+    "uid": "yGk4p9RPWkgT56IBeYnAro1IJeU2",
+    "apiKey": "AIzaSyDlcf8iUDzlJ9mVEiCR8tLR51pD1HeUqvs"
+}

components/public/header/index.vue

@@ -23,17 +23,7 @@
         :span="8"
         class="search"
       >
-        <el-autocomplete
-          v-model="value"
-          :fetch-suggestions="querySearchAsync"
-          placeholder="請輸入內容"
-          @select="handleSelect"
-        >
-          <el-button
-            slot="append"
-            icon="el-icon-search"
-          />
-        </el-autocomplete>
+        <search-bar/>
       </el-col>
       <el-col :span="8">
         <v-layout>
@@ -54,11 +44,13 @@
 import Navbar from './nav.vue'
 import User from './user.vue'
 import Cart from './cart.vue'
+import SearchBar from './search.vue'
 export default {
   components: {
     Navbar,
     User,
-    Cart
+    Cart,
+    SearchBar
   },
   props: {
     prominent: {

components/public/header/search.vue

@@ -5,7 +5,6 @@
         v-model="value"
         :fetch-suggestions="querySearchAsync"
         placeholder="請輸入內容"
-        @select="handleSelect"
       >
         <el-button
           slot="append"
@@ -16,6 +15,33 @@
   </div>
 </template>
 
-<style lang="scss">
+<script>
+export default {
+  data() {
+    return {
+      value: '',
+      timeout: null
+    }
+  },
+  methods: {
+    async querySearchAsync(queryString, callback) {
+      let { data } = await this.$axios.get(`/goods?keyword=${queryString}`)
+      console.log(data)
+      let searchResult = []
+      data.forEach(element => {
+        searchResult.push({
+          value: element.name
+        })
+      })
+      console.log(searchResult)
+      clearTimeout(this.timeout)
+      this.timeout = setTimeout(() => {
+        callback(searchResult)
+      }, 2000 * Math.random())
+    }
+  }
+}
+</script>
 
+<style lang="scss">
 </style>