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;
});
},
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) {
const target = (<HTMLInputElement>e.target);
const valueAttribute = target.attributes.getNamedItem("value");
@ -58,9 +70,7 @@ export default defineComponent({
if(valueAttribute != null)
selectedID = valueAttribute.value;
const selected = this.$data.Suggestions.filter(x => x.ID == selectedID)[0];
this.$data.Selected = selected;
this.$data.Suggestions = [];
this.$emit('update:modelValue', selected);
this.selectElement(selected);
},
clear() {
this.$data.Selected = undefined;
@ -72,7 +82,7 @@ export default defineComponent({
<template>
<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>
<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">