[WIP] initialize search bar

src/Bundle/ChillMainBundle/Resources/public/vuejs/AddressPicker/AddressPicker.vue

@@ -1,22 +1,23 @@
 <script setup lang="ts">
-
+import { Address } from "ChillMainAssets/types";
-import {Address} from "ChillMainAssets/types";
+import SearchBar from "ChillMainAssets/vuejs/AddressPicker/Component/SearchBar.vue";
 
 interface AddressPickerProps {
     suggestions?: Address[];
 }
 
 const props = withDefaults(defineProps<AddressPickerProps>(), {
-    suggestions: []
+    suggestions: () => [],
 });
 
-
+const onSearch = function (search: string) {
+    console.log("onSearch", search);
+};
 </script>
 
 <template>
-<p>test</p>
+    <search-bar @search="onSearch"></search-bar>
+    <p>test</p>
 </template>
 
-<style scoped lang="scss">
+<style scoped lang="scss"></style>
-
-</style>

src/Bundle/ChillMainBundle/Resources/public/vuejs/AddressPicker/Component/SearchBar.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+const emits = defineEmits<{
+    search: [search: string];
+}>();
+
+let searchTimer = 0;
+let searchString: string;
+
+const onInput = function (event: InputEvent) {
+    const target = event.target as HTMLInputElement;
+    const value = target.value;
+    searchString = value;
+
+    if (0 === searchTimer) {
+        window.clearTimeout(searchTimer);
+        searchTimer = 0;
+    }
+
+    searchTimer = window.setTimeout(() => {
+        if (value === searchString) {
+            emits("search", value);
+        }
+    }, 500);
+};
+</script>
+
+<template>
+    <input type="search" @input="onInput" />
+</template>
+
+<style scoped lang="scss"></style>

src/Bundle/ChillMainBundle/Resources/public/vuejs/AddressPicker/index.ts

@@ -1,10 +1,12 @@
-import {createApp} from "vue";
+import { createApp } from "vue";
 import AddressPicker from "ChillMainAssets/vuejs/AddressPicker/AddressPicker.vue";
 
-document.addEventListener('DOMContentLoaded', async () => {
+document.addEventListener("DOMContentLoaded", async () => {
-    document.querySelectorAll<HTMLDivElement>('div[data-address-picker]').forEach((elem): void  => {
+    document
-        const app = createApp(AddressPicker);
+        .querySelectorAll<HTMLDivElement>("div[data-address-picker]")
+        .forEach((elem): void => {
+            const app = createApp(AddressPicker);
 
-        app.mount(elem);
+            app.mount(elem);
-    })
+        });
-})
+});