Improve example with autocomplete buttons

src/components/PriceChecker.vue

@@ -33,6 +33,11 @@ const onActivityCodeAutocomplete = () => {
   operationCode.value =
     activityModel.value.find((e) => e.activityCode === activityCode.value)
       ?.operationCodes[0] ?? "";
+
+  const operationCodeInput = document.getElementsByName("operationCodeInput");
+  if (operationCodeInput.length > 0) {
+    setTimeout(() => operationCodeInput[0].focus(), 1);
+  }
 };
 
 const onOperationCodeChange = (value: string) => {
@@ -47,33 +52,35 @@ const onOperationCodeAutocomplete = () => {
 </script>
 
 <template>
-  <div class="inputs">
+  <div class="input-group" style="margin-bottom: 10px">
+    <label style="width: 8em">Activiteitscode</label>
     <AutoCompleteInput
       :model-value="activityCode"
       :options="activityCodeOptions"
       @update:model-value="onActivityCodeChange"
       @autocomplete="onActivityCodeAutocomplete"
     />
+  </div>
 
+  <div class="input-group">
+    <label style="width: 8em">Bewerkingscode</label>
     <AutoCompleteInput
       :model-value="operationCode"
       @update:model-value="onOperationCodeChange"
       @autocomplete="onOperationCodeAutocomplete"
       :options="operationCodeOptions"
+      :disabled="operationCodeOptions.length < 2"
+      name="operationCodeInput"
       always-show-suggestions
     />
   </div>
 
-  <p v-if="price">{{ price }} euro</p>
+  <p v-if="price">Berekende prijs: {{ price }} euro</p>
 </template>
 
 <style>
-.inputs {
+.input-group {
   display: flex;
-  flex-direction: column;
-}
-
-.inputs > * {
-  margin-bottom: 1em;
+  gap: 10px;
 }
 </style>