src/features/search/components/Searchbar.vue

@@ -16,20 +16,35 @@ limitations under the License.
 
 <script setup>
 const searchQuery = defineModel();
+
+import { useRouter } from 'vue-router';
+
+const router = useRouter()
+const props = defineProps(['autoSubmit'])
+
+const submitSearch = function () {
+    if (props.autoSubmit !== undefined) {
+        router.push({
+            name: 'searchResults',
+            query: { q: searchQuery.value }
+        });
+    };
+}
 </script>
 
 <template>
-    <div class="search-wrapper">
-        <input
-            v-model="searchQuery"
-            type="search"
-            name="search"
-            placeholder="Search..."
-            required
-        />
-        <button type="submit" class="search-button">Search</button>
-    </div>
-</template>
+    <form @submit.prevent="submitSearch">
+        <div class="search-wrapper">
+            <input
+                v-model="searchQuery"
+                type="search"
+                placeholder="Search..."
+                required
+            />
+            <button type="submit" class="search-button">Search</button>
+        </div>
+    </form>
+    </template>
 
 <style scoped>
 .search-wrapper {

src/views/SearchView.vue

@@ -25,10 +25,7 @@ const router = useRouter();
 const searchQuery = ref('');
 
 const submitSearch = function () {
-    router.push({
-        name: 'searchResults',
-        query: { q: searchQuery.value }
-    })
+
 };
 </script>
 
@@ -41,9 +38,9 @@ const submitSearch = function () {
             </span>
         </header>
     
-        <form class="search-form" @submit.prevent="submitSearch">
-            <Searchbar v-model="searchQuery" ref="searchbar" />
-        </form>
+        <div class="search-container">
+            <Searchbar v-model="searchQuery" ref="searchbar" auto-submit />
+        </div>
     </div>
 </template>
 
@@ -79,7 +76,7 @@ const submitSearch = function () {
     font-size: small;
 }
 
-.search-form {
+.search-container {
     width: 70%;
     max-width: 624px;
 }