192 lines
8.5 KiB
JavaScript
192 lines
8.5 KiB
JavaScript
//TODO: if autocomplete is focus and the input has not a single character still show "Bitte mindestens 3 Zeichen eingeben"
|
|
//TODO: fix the fetchSuggestions function to not show a loading spinner when the input gets cleared
|
|
//TODO: fix so we can use arrow keys to navigate the suggestions
|
|
// TODO: Implement giving the option without the need of an API || need to use computed property to filter the items
|
|
// TODO: Fix the weirdness with timeout and selecting the suggestion
|
|
|
|
Vue.component('tt-autocomplete', {
|
|
template: `
|
|
<div class="form-group" :class="{'row': row}"
|
|
:data-api-url="apiUrl"
|
|
>
|
|
<slot name="prepend"></slot>
|
|
<label :class="{'col-form-label': row, 'col-sm-4': row, 'col-form-label-sm': sm && row}"
|
|
v-if="label" :for="label">{{ label }}</label>
|
|
<div class="autocomplete position-relative" :class="{'col-sm-8 p-0': row}">
|
|
<input
|
|
type="text"
|
|
:id="label"
|
|
class="form-control tt-autocomplete"
|
|
:class="{'form-control-sm': sm}"
|
|
v-model="displayValue"
|
|
:placeholder="placeholder"
|
|
@input="onInput"
|
|
@focus="onFocus"
|
|
@blur="onBlur"
|
|
:style="{'padding-right': $slots.append ? '30px' : '0'}"
|
|
/>
|
|
<slot name="append"></slot>
|
|
<button v-show="displayValue.length > 0" @click="displayValue = ''; $emit('input', '');" tabindex="-1" type="button"
|
|
class="btn btn-link position-absolute"
|
|
style="right: -5px; top: 50%; transform: translateY(-50%);">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
|
|
<ul v-show="showSuggestions && displayValue.length > 0 || isLoading"
|
|
class="dropdown-menu show dropdown-shadow">
|
|
|
|
<li class="dropdown-item" v-show="isLoading">
|
|
<div class="spinner-border spinner-border-sm text-primary" role="status">
|
|
<span class="sr-only">Loading...</span>
|
|
</div>
|
|
Einträge werden geladen...
|
|
</li>
|
|
|
|
<template v-show="showSuggestions && displayingItems.length > 0 && isLoading !== true">
|
|
<li
|
|
v-for="(item) in displayingItems.slice(0, 10)"
|
|
:key="item.value"
|
|
:class="{'active': value === item.value}"
|
|
class="dropdown-item"
|
|
@click.prevent="selectSuggestion(item)"
|
|
style="cursor: pointer;"
|
|
>
|
|
{{ item.text }}
|
|
</li>
|
|
<!-- display more search results available define it more precisely in German -->
|
|
<li v-show="displayingItems.length > 10" class="dropdown-item disabled">
|
|
Mehr Suchergebnisse vorhanden. Bitte genauer eingeben
|
|
</li>
|
|
</template>
|
|
<li v-show="displayingItems.length === 0 && isLoading === false && displayValue.length >= 3"
|
|
class="dropdown-item disabled">
|
|
Keine Suchergebnisse vorhanden.
|
|
</li>
|
|
<li v-show="displayValue.length < 3" class="dropdown-item disabled">
|
|
Bitte mindestens 3 Zeichen eingeben
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
`,
|
|
props: {
|
|
value: {type: [String, Number]},
|
|
label: {type: String, required: false},
|
|
apiUrl: String,
|
|
placeholder: {type: String, default: ''},
|
|
items: {type: Array, default: () => []},
|
|
sm: {type: Boolean, default: true},
|
|
row: {type: Boolean, default: false},
|
|
}, data() {
|
|
return {
|
|
displayingItems: [],
|
|
oldDisplayValue: '',
|
|
displayValue: '',
|
|
isLoading: false,
|
|
showSuggestions: false,
|
|
cursor: -1,
|
|
fetchSuggestionsDebounceTimer: null,
|
|
disableIDFetch: false
|
|
};
|
|
},
|
|
async mounted() {
|
|
this.updateDisplayValue().then();
|
|
},
|
|
methods: {
|
|
setOldDisplayValue(newValue, oldValue) {
|
|
this.oldDisplayValue = oldValue;
|
|
},
|
|
async updateDisplayValue(newValue, oldValue) {
|
|
if (this.disableIDFetch) {
|
|
this.disableIDFetch = false;
|
|
return;
|
|
}
|
|
if (newValue) {
|
|
this.value = newValue;
|
|
}
|
|
|
|
|
|
if (this.value && this.apiUrl) {
|
|
const response = await axios.get(`${this.apiUrl}${this.apiUrl.includes('?') ? '&' : '?'}autocomplete=1&searchedID=${this.value}`);
|
|
this.displayValue = response.data[0].text;
|
|
} else if (this.value) {
|
|
const selectedItem = this.items.find(item => item.value === this.value);
|
|
this.displayValue = selectedItem ? selectedItem.text : '';
|
|
} else {
|
|
this.$emit('input', '');
|
|
this.displayValue = this.displayValue.replace(this.oldDisplayValue, '');
|
|
}
|
|
},
|
|
onInput(event) {
|
|
this.displayValue = event.target.value;
|
|
this.$emit('input', '');
|
|
this.fetchSuggestions();
|
|
}, onFocus() {
|
|
this.showSuggestions = true;
|
|
}, onBlur() {
|
|
setTimeout(() => {
|
|
this.showSuggestions = false;
|
|
}, 200);
|
|
}, fetchSuggestions() {
|
|
if (this.displayValue.length < 3) {
|
|
this.$set(this, 'displayingItems', []);
|
|
return this.displayingItems = [];
|
|
}
|
|
|
|
if (!this.apiUrl) {
|
|
|
|
const isNegated = this.displayValue.startsWith('!');
|
|
const substrings = (isNegated ? this.displayValue.slice(1) : this.displayValue).split(' ').map(s => s.toLowerCase());
|
|
this.displayingItems = this.items.filter(item => {
|
|
let substringMatch = true;
|
|
for (var k = 0, klen = substrings.length; k < klen; ++k) {
|
|
if (!item.text.toLowerCase().includes(substrings[k])) {
|
|
substringMatch = false;
|
|
break;
|
|
}
|
|
}
|
|
return (isNegated && !substringMatch) || (!isNegated && substringMatch);
|
|
})
|
|
|
|
return
|
|
}
|
|
|
|
this.isLoading = true;
|
|
clearTimeout(this.fetchSuggestionsDebounceTimer);
|
|
|
|
this.fetchSuggestionsDebounceTimer = setTimeout(() => {
|
|
setTimeout(async () => {
|
|
if (this.displayValue.length < 3) {
|
|
this.displayingItems = [];
|
|
this.isLoading = false;
|
|
return;
|
|
}
|
|
|
|
const response = await axios.get(`${this.apiUrl}${this.apiUrl.includes('?') ? '&' : '?'}autocomplete=1&q=${encodeURIComponent(this.displayValue)}`);
|
|
if (response.data?.status === 'error') {
|
|
this.displayingItems = [];
|
|
} else {
|
|
this.displayingItems = response.data
|
|
}
|
|
this.isLoading = false;
|
|
|
|
this.fetchSuggestionsDebounceTimer = null;
|
|
}, 100);
|
|
}, 300); // Adjust the 300ms debounce time as needed
|
|
}, selectSuggestion(item) {
|
|
this.disableIDFetch = true;
|
|
this.$emit('input', item.value);
|
|
this.displayValue = item.text;
|
|
this.showSuggestions = false;
|
|
}, clear() {
|
|
this.displayValue = '';
|
|
this.$emit('input', '');
|
|
}
|
|
},
|
|
watch: {
|
|
displayValue: {handler: 'setOldDisplayValue', immediate: true},
|
|
value: {handler: 'updateDisplayValue', immediate: true},
|
|
apiUrl: {handler: 'fetchSuggestions', immediate: true},
|
|
}
|
|
});
|