jacob1123/budgeteer
1
1
Fork 0
Code Issues 12 Pull Requests 1 Packages Releases 1 Wiki Activity

Implement simple keyboard selection

Browse Source
This commit is contained in:
Jan Bader 2022-02-07 22:19:24 +00:00
parent b5c657978c
commit 3ef5836607
1 changed files with 14 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
web/src/components/Autocomplete.vue
View File

@ -51,6 +51,18 @@ export default defineComponent({
this.$data.Suggestions = suggestions; this.$data.Suggestions = suggestions;
}); });
}, },
keypress(e : KeyboardEvent) {
console.log(e.key);
if(e.key == "Enter") {
const selected = this.$data.Suggestions[0];
this.selectElement(selected);
}
},
selectElement(element : Suggestion) {
this.$data.Selected = element;
this.$data.Suggestions = [];
this.$emit('update:modelValue', element);
},
select(e : MouseEvent) { select(e : MouseEvent) {
const target = (<HTMLInputElement>e.target); const target = (<HTMLInputElement>e.target);
const valueAttribute = target.attributes.getNamedItem("value"); const valueAttribute = target.attributes.getNamedItem("value");
@ -58,9 +70,7 @@ export default defineComponent({
if(valueAttribute != null) if(valueAttribute != null)
selectedID = valueAttribute.value; selectedID = valueAttribute.value;
const selected = this.$data.Suggestions.filter(x => x.ID == selectedID)[0]; const selected = this.$data.Suggestions.filter(x => x.ID == selectedID)[0];
this.$data.Selected = selected; this.selectElement(selected);
this.$data.Suggestions = [];
this.$emit('update:modelValue', selected);
}, },
clear() { clear() {
this.$data.Selected = undefined; this.$data.Selected = undefined;
@ -72,7 +82,7 @@ export default defineComponent({
<template> <template>
<div> <div>
<input v-if="Selected == undefined" v-model="SearchQuery" /> <input @keypress="keypress" v-if="Selected == undefined" v-model="SearchQuery" />
<span @click="clear" v-if="Selected != undefined" class="bg-gray-300">{{Selected.Name}}</span> <span @click="clear" v-if="Selected != undefined" class="bg-gray-300">{{Selected.Name}}</span>
<div v-if="Suggestions.length > 0" class="absolute bg-gray-400 w-64 p-2"> <div v-if="Suggestions.length > 0" class="absolute bg-gray-400 w-64 p-2">
<span v-for="suggestion in Suggestions" class="block" @click="select" :value="suggestion.ID"> <span v-for="suggestion in Suggestions" class="block" @click="select" :value="suggestion.ID">