feat(#17): Add an appraisal compare-by-location page

src/market/location/MarketLocationInput.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import {vOnClickOutside} from '@vueuse/components';
+import {watchDebounced} from '@vueuse/core';
+import {ref, watch} from 'vue';
+import {MarketLocation, searchMarketLocations} from './MarketLocation';
+
+const modelValue = defineModel<MarketLocation>();
+
+const isOpen = ref(false);
+const search = ref(modelValue.value?.name ?? '');
+const suggestions = ref<MarketLocation[]>([]);
+
+const select = (location: MarketLocation) => {
+    modelValue.value = location;
+    search.value = location.name;
+    suggestions.value = [];
+    isOpen.value = false;
+};
+
+watch(() => modelValue.value, v => {
+    search.value = v?.name ?? '';
+});
+
+watchDebounced(search, async value => {
+    const term = value.trim();
+
+    if (!isOpen.value || term.length < 3 || term === modelValue.value?.name) {
+        suggestions.value = [];
+    } else {
+        suggestions.value = await searchMarketLocations(term);
+    }
+}, {debounce: 300});
+</script>
+
+<template>
+    <div @click="isOpen = true" v-on-click-outside="() => isOpen = false">
+        <input type="text" class="w-96" v-model="search" placeholder="Search a market location…" />
+        <div v-if="isOpen && suggestions.length > 0" class="z-20 absolute w-96">
+            <div class="rounded-b bg-slate-500 max-h-72 overflow-y-auto">
+                <div
+                    v-for="s in suggestions"
+                    :key="s.id"
+                    class="px-1 py-0.5 cursor-pointer whitespace-nowrap overflow-hidden hover:bg-slate-700"
+                    @click="select(s)"
+                >
+                    {{ s.name }} <span class="text-slate-300">({{ s.regionName }})</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>