cssd-back/resources/js/vue/components/modal/ticket/NewMessage.vue

<template>
    <div>
        <v-container>
            <material-card class color="black" title="New Message" text>
                <v-layout wrap class="px-4 mb-3">
                    <v-flex xs12 sm12 md12>
                        <v-autocomplete
                            :items="items"
                            :loading="loading"
                            :search-input.sync="search"
                            v-model="user_id"
                            item-text="name"
                            item-value="id"
                            label="Search"
                            persistent-hint
                            prepend-icon="fas fa-search"
                            color="black"
                        ></v-autocomplete>
                    </v-flex>
                </v-layout>
                <ticket-send-message :user-id="user_id" />
            </material-card>
        </v-container>
    </div>
</template>
<script>
import { ApiService } from "@/services";
import { urls } from "@/config/urls";

export default {
    data() {
        return {
            loading: false,
            items: [],
            search: "",
            user_id: 0
        };
    },
    watch: {
        search(val) {
            val && val.length > 2 && this.querySelections(val);
        }
    },
    methods: {
        async querySelections(val) {
            if (!this.loading) {
                this.loading = true;
                const result = await ApiService.get(urls.userSearch(val));
                if (result && result.data.data) {
                    this.items = result.data.data;
                    this.loading = false;
                }
            }
        }
    }
};
</script>
<style lang="scss" scoped>
</style>