vue+element ui实现输入框手动输入以及下拉框选择

 

 

<template>
	<el-form ref="ruleForm" :model="ruleForm" label-width="80px">
		<el-form-item label="名称">
			<el-select
			v-model="ruleForm.tranCode"
			style="width: 312px;"
			ref="valSelect"
			filterable
			@blur="valSelectBlur"
			@focus="valSelectFocus"
			@change="valSelectChange"
			>
				<el-option v-for="item in options" :key="item" :label="item" :value="item">
				</el-option>
			</el-select>
			<el-input v-model="ruleForm.tranname" style="width: 280px;position: absolute;left: 0px;" @blur="valInputBlur" ref="valInput"
			 @focus="valInputFocus"></el-input>
		</el-form-item>
	</el-form>
</template>

<script>
	export default {
		data() {
			return {
				ruleForm: {
					tranname: "",
					tranCode: ''
				},
				options: [],
				optionsAll: ['黄金糕', '双皮奶', '蚵仔煎', '龙须面', '北京烤鸭', '黄金面', '奶煎鸭'],
				inputOneFocus: true,
				valSelectFocusVal: false,
				valInputFocusVal: false,
			}
		},
		watch: {
			"ruleForm.tranname": function(val) {
				var data = [];
				for (var i = 0; i < this.optionsAll.length; i++) {
					if (this.optionsAll[i].indexOf(val) >= 0 || val == 0) {
						data.push(this.optionsAll[i]);
					}
				}
				this.options = data;
				this.$refs.valSelect.focus();
			}
		},
		methods: {
			valSelectFocus() {
				this.valSelectFocusVal = true;
				this.$refs.valInput.focus();
			},
			valSelectBlur() {
				this.valSelectFocusVal = false;
			},
			valSelectChange(val) {
				this.valSelectFocusVal = false;
				this.ruleForm.tranname = val;
			},
			valInputBlur() {
				let that = this;
				that.valInputFocusVal = false;
				if (that.optionsAll.indexOf(that.ruleForm.tranname) >= 0) {
					setTimeout(() => {
						if (that.valSelectFocusVal == false && that.valInputFocusVal == false) {
							console.log("输入值在下拉项中存在");
							that.inputOneFocus = true;
						}
					}, 100)
				}else{
					setTimeout(() => {
						if (that.valSelectFocusVal == false && that.valInputFocusVal == false) {
							console.log("zzz");
							that.inputOneFocus = true;
						}
					}, 500)
				}
			},
			valInputFocus() {
				this.valInputFocusVal = true;
				this.ruleForm.tranCode = this.ruleForm.tranname;
				if(this.inputOneFocus){
					this.inputOneFocus = false;
					var data = [];
					for (var i = 0; i < this.optionsAll.length; i++) {
						if (this.optionsAll[i].indexOf(this.ruleForm.tranname) >= 0 || this.ruleForm.tranname == 0) {
							data.push(this.optionsAll[i]);
						}
					}
					this.options = data;
					setTimeout(() => {
						this.$refs.valSelect.focus();
					}, 200)
				}
			}
		}
	}
</script>