Basic search

resources/js/Pages/IkeaRoot.vue

@@ -26,11 +26,13 @@ const ccountry_list = ref(['TEST']);
 const selected = ref(null);
 const article = ref('');
 const hrates = ref([
-  { text: "Currency", value: "currency", sortable: true},
-  { text: "Country", value: "country_name", sortable: true},
-  { text: "Rate", value: "rate", sortable: true}
+  { text: "Currency", value: "currency", sortable: true },
+  { text: "Country", value: "country_name", sortable: true },
+  { text: "Rate", value: "rate", sortable: true }
 ]);
 const rates = ref([]);
+const options_items = ref([]);
+const selected_item = ref(null);
 
 const options = {
   region: 150,
@@ -96,6 +98,30 @@ const fetch_rates = async () => {
   }
 }
 
+const async_search = async (item) => {
+  try {
+    if (item.length > 4) {
+      const response = await axios.get(route('products.search',item));
+      options_items.value = response.data.map((i) => { return { "item": i.name, "desc": i.typeName, "img": i.mainImageUrl } });
+      console.log("VALUES=", options_items.value);
+    }
+  } catch (e) {
+    const response = await Swal.fire({
+      title: __('are you want to try again') + '?',
+      text: __(`${e}`),
+      icon: 'question',
+      showCancelButton: true,
+      showCloseButton: true,
+    })
+
+    response.isConfirmed && fetch()
+  }
+}
+
+function customLabel({item, desc}) {
+  //console.log(item);
+ return `${item} - ${desc}` ;
+}
 const headers = ref([
   { text: "Id", value: "id", sortable: true },
   { text: "Country", value: "country", sortable: true },
@@ -158,7 +184,7 @@ onMounted(fetch_rates);
           <span class="font-extrabold font-mono">Zadaj polozku</span>
         </div>
         <div>
-          <SearchInput v-model="article"></SearchInput>
+          <multiselect v-model="selected_item" label="item" track-by="item" :custom-label="customLabel" placeholder="Find item" :searchable="true" :options="options_items" @search-change="async_search"/>
         </div>
         <div class="mt-5">
           <EasyTable :rows-per-page=10 :headers="headers" :items="items"></EasyTable>