Move search form to the search bar component

src/features/search/components/Searchbar.vue

@@ -16,19 +16,34 @@ 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>
+    <form @submit.prevent="submitSearch">
         <div class="search-wrapper">
             <input
                 v-model="searchQuery"
                 type="search"
-            name="search"
                 placeholder="Search..."
                 required
             />
             <button type="submit" class="search-button">Search</button>
         </div>
+    </form>
     </template>
 
 <style scoped>

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">
+        <div class="search-container">
-            <Searchbar v-model="searchQuery" ref="searchbar" />
+            <Searchbar v-model="searchQuery" ref="searchbar" auto-submit />
-        </form>
+        </div>
     </div>
 </template>
 
@@ -79,7 +76,7 @@ const submitSearch = function () {
     font-size: small;
 }
 
-.search-form {
+.search-container {
     width: 70%;
     max-width: 624px;
 }