thetool/public/plugins/vue/tt-components/tt-autocomplete.js

//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 && 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)"
                            @mousedown.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},
        returnText:         {type: Boolean, default: false},
        emitDisplayValue:   {type: Boolean, default: false},
    }, data() {
        return {
            window,
            displayingItems:               [],
            oldDisplayValue:               '',
            displayValue:                  '',
            isLoading:                     false,
            showSuggestions:               false,
            cursor:                        -1,
            fetchSuggestionsDebounceTimer: null,
            disableIDFetch:                false
        };
    },
    async mounted() {
        this.updateDisplayValue().then();
    },
    methods: {
        setOldDisplayValue(newValue, oldValue) {
            if (this.emitDisplayValue && newValue) this.$emit('displayValue', newValue);
            this.oldDisplayValue = oldValue;
        },
        async updateDisplayValue(newValue, oldValue) {
            if (this.disableIDFetch) {
                this.disableIDFetch = false;
                return;
            }

            if (newValue) {
                this.$emit('input', newValue);
                this.value = newValue;
            }
            if (oldValue && !newValue) {
                this.$emit('input', '');
                this.displayValue = '';
            }


            if (this.value && this.apiUrl) {
                if (this.returnText && isNaN(this.value)) {
                    this.displayValue = this.value;
                    return;
                }
                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 : this.displayValue;
            } else {
                if (this.returnText === false && !(typeof this.value === 'undefined' || this.value === '')) this.$emit('input', '');
                this.displayValue = this.displayValue.replace(this.oldDisplayValue, '');
            }
        },
        onInput(event) {
            this.displayValue = event.target.value;
            if (this.returnText) this.$emit('input', this.displayValue);
            this.fetchSuggestions();
        }, onFocus() {
            this.showSuggestions = true;
        }, onBlur() {
            setTimeout(() => {
                this.showSuggestions = false;
            }, 200);
        }, fetchSuggestions() {
            this.$set(this, 'displayingItems', []);
            if (this.displayValue.length < 3) return;

            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},
    }
});