input模仿select实时更新搜索内容
1.使用Vue框架和style的stylus样式
2.使用input的oninput事件,能实时根据input的值改变下拉框的数据,oninput事件兼容IE9以上版本,注意:不能使用onchange事件,因为onchange事件必须是在input失焦之后才会改变下拉框数据
3.使用input的onfocus事件将下拉框显示
4.使用input的onblur事件延迟下拉框隐藏,必须使用setTimeout事件延迟,延迟时间差不多是200毫秒,否则下拉框li的点击事件不能执行。
<div class="parent-item">
<input
v-model="parentid"
placeholder="请输入"
@focus="showParent = true"
@input="changeInput(parentid)"
@blur="listBlur"
/>
<i class="el-icon-caret-bottom parent-icon"></i>
<ul class="form-ul" v-show="showParent">
<li v-for="item in parentList" :key="item" @click="parentid = item">{{item}}</li>
</ul>
</div>
<script>
export default {
data() {
return {
parentid:null,//input绑定的v-model数据
showParent: false, //下拉框显示
parentList: [1, 2, 3, 4, 6, 5, 7, 8, 9] //输入框搜索下拉列表
};
},
mounted() {
this.copyParent = this.parentList; //先提起保留一份
},
methods: {
//下拉框的input失焦事件
listBlur() {
setTimeout(() => {
this.showParent = false;
}, 200);
},
//下拉框的input值改变事件(oninput事件)
changeInput(val) {
this.parentList = this.copyParent.filter(item => {
return item == val;
});
//还原下拉数据
if (val == "" || val == null) {
this.parentList = this.copyParent;
}
},
}
};
</script>
<style lang = "stylus">
.parent-item {
position: relative;
.title-font {
font-size: 15px;
}
.parent-icon {
position: absolute;
right: 5px;
top: 9px;
color: #888888;
}
.form-ul {
list-style: none;
padding: 0;
margin: 0;
position: absolute;
top: 35px;
background-color: #ffffff;
z-index: 100;
width: 360px;
border: $borderStyle;
max-height: 200px;
overflow-y: auto;
li {
padding: 6px;
cursor: pointer;
&:hover {
background-color: $liBackColor;
}
}
}
}
</style>