handlenett-frontend: show existing items

when creating new ones. Hoping to avoid duplicates.

handlenett-frontend/components/NewItem.vue

@@ -1,18 +1,24 @@
 <template>
     <form @submit.prevent="update">
-        <input type="text" placeholder="Trenger vi noe mer?" v-model="item">
+        <input type="text" placeholder="Trenger vi noe mer?" @keyup="typing" v-model="item">
         <button class="btn" @click="update">🛒</button>
     </form>
 </template>
 <script setup>
 import { ref } from 'vue'
 const item = ref('')
-const emit = defineEmits(['changed'])
+const emit = defineEmits(['changed', 'typing'])
 
 const update = () => {
     emit('changed', { name: item.value, isComplete: false })
     item.value = ''
 }
+
+const typing = () => {
+    if (item.value.length !== 1) {
+        emit('typing', item.value)
+    }
+}   
 </script>
 <style scoped>
 form {

handlenett-frontend/pages/index.vue

@@ -4,12 +4,16 @@
         <div class="loader"></div>
     </div>
     <div v-else>
+        <NewItem @changed="newItem" @typing="typing"></NewItem>
+        <div v-if="itemsContainingSequence.length > 0">
+            Vi har allerede disse tilgjengelig for valg: {{ itemsContainingSequence }}
+        </div>
+
         <div style="margin-bottom: 2rem;">
             <Item v-for="i in items" :key="i.id" @changed="updatedItem" @delete="deleteItem"
                 :isElementDeletable="currentUser === i.createdBy" :isElementEditable="currentUser === i.createdBy"
                 :element="i" />
         </div>
-        <NewItem @changed="newItem"></NewItem>
     </div>
     <!-- <pre>
         {{ items }}
@@ -22,6 +26,7 @@ const { $getAccounts } = useNuxtApp();
 const items = ref([])
 const loading = ref(true)
 const currentUser = ref("")
+const itemsContainingSequence = ref([])
 
 onMounted(async () => {
 
@@ -53,7 +58,13 @@ const updatedItem = (updatedItem) => {
         items.value[idx] = data;
     });
 }
-
+const typing = (item) => {
+    if (item === '') {
+        itemsContainingSequence.value = []
+        return
+    }
+    itemsContainingSequence.value = items.value.filter(i => i.name.toLowerCase().includes(item.toLowerCase())).map(i => i.name)
+}
 const newItem = (newItem) => {
     if (newItem.name === '') return