unity/resources/js/user/components/inputs/SelectOptionAutoCompleteInput.vue

<template>
	<div class="form-group" :class="{'has-error': form.errors.has(input_name)}">
	    <label v-if="label" for="name">{{ label }}</label>
		<vue-tags-input
			ref="tags_input" 
			v-model="tag"
			:tags="tags"
			:autocomplete-min-length="0"
			:add-on-blur="false"
			:autocomplete-items="autocompleteItems"
			:before-deleting-tag="deleteTag"
			:max-tags="limit_tag"
			:add-only-from-autocomplete="!can_add_new_tag ? true : false"
			:placeholder="''"
			@tags-changed="update"
			@before-adding-tag="checkTag"
			@focus="focus()"
		>
		</vue-tags-input>
        <div class="text-danger text-left" v-if="form.errors.has(input_name)" v-text="form.errors.get(input_name)"></div>
	</div>
</template>

<script type="text/javascript">
	export default {
		props: {
            input_name: String,
            form: Object,
            exist_data: Array,
            data_set: Array,
            placeholder: String,
            label: String,
            endpoint: String,
            params: Object,
            search_field: String,
            is_array: Boolean,
            limit_tag: Number,
            return_key: String,
            can_add_new_tag: Boolean 
        },
		data() {
			let vm = this;
			return {
				tag: '',
				original_tag: [],
				tags: vm.exist_data ? vm.exist_data : [],
				autocompleteItems: [],
				pervious_item: []
			}
		},
		methods: {
			focus() {
				let vm = this;
				if (vm.pervious_item.length > 0) {
					vm.pervious_item = [];
					vm.initItems();
				}
			},
			checkTag(obj) {
				let vm = this;
				if (vm.limit_tag >= vm.tags.length) {
					vm.tags = [];					
				}
				obj.addTag();
			},
			update(newTags = '') {
				let vm = this;
				vm.tags = newTags;
				vm.pervious_item = vm.autocompleteItems;
				vm.autocompleteItems = [];
				vm.keyConvert();
				vm.$emit('clicked',  vm.extractRow(vm.tags));
				vm.form.errors.clear(vm.input_name);
		    },
		    deleteTag() {
				vm.$emit('clicked',  vm.extractRow(vm.tags));
		    },
		    keyConvert() {
		    	let vm = this;
		    	if (!vm.original) {
					vm.form[vm.input_name] = General.getKey(vm.tags, (!vm.return_key ? 'id' : vm.return_key));
		    	}
		    	else {
		    		vm.form[vm.input_name] = vm.original_tag;
		    	}
		    },
			initItems() {
				let vm = this;


				if (vm.pervious_item.length > 0) {
					return;
				}

				if (!vm.data_set) {
					let search_field = {};
					search_field[vm.search_field] = vm.array ? [vm.tag] : vm.tag;

					let form = new Form({...vm.params, ...search_field});
					General.getCall(vm.endpoint, form).then(data => {
						vm.autocompleteItems = data.data.map(item => {
		    			vm.original_tag.push(vm.tag);

						return { 
							id: item.id,
							hash_id: (item.hash_id ? item.hash_id : ''),
							row: item,
							text: (item.name ? item.name : item.hash_id ) 
						};
						});
					});
				}
				else {
					vm.autocompleteItems = vm.data_set;
				}
		    },
		    extractRow() {
				let vm = this;
		    	let return_row = [];
				vm.tags.forEach(function(element, index) {
					return_row.push(element.row);
				});
		    	return return_row;
		    }
		},
		created() {
			let vm = this;
        	setTimeout(function(){
        		vm.tags = vm.exist_data ? vm.exist_data : [];
				vm.$emit('clicked', vm.extractRow(vm.tags));
			}, 1000);

			vm.initItems();

		},
		watch: {
			'tag': 'initItems',
		}
	}
</script>