vue下拉输入框 element ul输入下拉框

vue下拉输入框、element ul下拉选择框

(或者 element ui input输入框里的：带输入建议、自定义模板、远程搜索例子也可以实现此功能（如果需求不是必须要输入框后面有下拉框的箭头就可以使用官网的）)

代码如下

<template><el-form ref="form" :model="form" label-width="80px"><el-form-item label="名称"><!-- 下拉框 --><el-select v-model="form.value" 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><!-- 输入框 使用position: absolute;left: 0px;将输入框定位到下拉框上方 --><el-input v-model="form.name" 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 {// 表单值form: {name: "",value: ''},// 下拉框显示的内容options: [],// 下拉框全部内容(内容从后台获取)optionsAll: ['黄金糕', '双皮奶', '蚵仔煎', '龙须面', '北京烤鸭', '黄金面', '奶煎鸭'],// 焦点信息// 输入框是否第一次获取焦点inputOneFocus: true,// 焦点是否在下拉框valSelectFocusVal: false,// 焦点是否在输入框valInputFocusVal: false,}},watch: {"form.name": 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.form.name = val;//---其他操作---可以去后台查询相关数据},//输入框失去焦点后valInputBlur() {let that = this;that.valInputFocusVal = false;if (that.optionsAll.indexOf(that.form.name) >= 0) {setTimeout(() => {//100毫秒后 焦点不在输入框也不在下拉框时的操作if (that.valSelectFocusVal == false && that.valInputFocusVal == false) {//---其他操作---可以去后台查询相关数据console.log("输入值在下拉项中存在");that.inputOneFocus = true;}}, 100)}else{setTimeout(() => {//500毫秒后 焦点不在输入框也不在下拉框时的操作if (that.valSelectFocusVal == false && that.valInputFocusVal == false) {//---其他操作---可以去后台查询相关数据console.log("zzz");that.inputOneFocus = true;}}, 500)}},// 输入框获取焦点valInputFocus() {this.valInputFocusVal = true;this.form.value = this.form.name;//是否第一次获取焦点if(this.inputOneFocus){this.inputOneFocus = false;var data = [];// 从全部中筛选和输入框匹配的下拉框for (var i = 0; i < this.optionsAll.length; i++) {if (this.optionsAll[i].indexOf(this.form.name) >= 0 || this.form.name == 0) {data.push(this.optionsAll[i]);}}//将匹配的下拉项给下拉框this.options = data;//200毫秒后打开下拉框setTimeout(() => {//焦点给下拉框this.$refs.valSelect.focus();}, 200)}}}}</script>