From cab24874f74713586277cb087a827c18d82bc58d Mon Sep 17 00:00:00 2001
From: SRP-mango <siriphicha.mango02@gmail.com>
Date: Fri, 15 Sep 2023 01:36:47 +0700
Subject: [PATCH] toggle search bar

---
 src/views/Home.vue | 38 +++++++++++++++++++++++++++-----------
 1 file changed, 27 insertions(+), 11 deletions(-)

diff --git a/src/views/Home.vue b/src/views/Home.vue
index 03a2106..e392d98 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -20,6 +20,7 @@
                   v-model="searchQuery"
                   @keyup.enter="performSearch"
                   @input="performSearch"
+                  @click="toggleSearchBar()"
                   density="compact"
                   variant="solo"
                   prepend-inner-icon="mdi-magnify"
@@ -37,13 +38,28 @@
         
       </v-layout>
 
-      <div v-if="!hideSearchResults && searchResults.length > 0" class="search-results">
-        <ul>
-          <li v-for="result in searchResults" :key="result.place_id" @click="moveToLocation(result)">
-            {{ result.display_name }}
-          </li>
-        </ul>
-      </div>
+      <!-- <div v-if="searchResults.length > 0" class="search-results">
+          <ul>
+             <li v-for="result in searchResults" :key="result.place_id" @click="moveToLocation(result)">
+               {{ result.display_name }}
+             </li>
+          </ul>
+      </div> -->
+
+            
+      <v-list v-if="searchResults.length > 0 && !showSearchBar" class="search-results">
+        <v-list-item
+          v-for="result in searchResults"
+          :key="result.place_id"
+          @click="moveToLocation(result),toggleSearchBar()"
+        >
+          <v-list-item-icon>
+            <v-icon>mdi-map-marker</v-icon>
+          </v-list-item-icon>
+          {{ result.display_name }}
+        </v-list-item>
+      </v-list>
+
   <!-- <map/> -->
     <ol-map
     :loadTilesWhileAnimating="true"
@@ -91,14 +107,16 @@ const popupData = ref(null);
 const searchQuery = ref("");
 const searchResults = ref([]);
 const showSearchBar = ref(false);
-const hideSearchResults = ref(true);
 
+const toggleSearchBar = () => {
+  showSearchBar.value = !showSearchBar.value;
+};
 
 const moveToLocation = (result) => {
   const lat = parseFloat(result.lat);
   const lon = parseFloat(result.lon);
   center.value = [lon, lat];
-  hideSearchResults.value = true;
+  showSearchBar.value = false;
 };
 
 const performSearch = async () => {
@@ -108,8 +126,6 @@ const performSearch = async () => {
     );
 
     searchResults.value = response.data.slice(0, 5);
-
-    hideSearchResults.value = false;
   } catch (error) {
     console.error("Error fetching search results:", error);
   }