©2020-2024 ioDraw All rights reserved,
Privacy Policy
一个需求input实现下拉及搜索，实习练手不让用ui模板
首先百度得出2种方法，一个是input+select，一个是input+datalist
input组合select改css写js，最后bug太多放弃了
input+datalist直接成功了，list和id起一样名字就行了，看到有博客说datalist有的浏览器不适配
在datalist外面套select的，这里不多做赘述，datalist支持模糊查询，实时检索列表
但是需求让固定datalist在输入框下方，不让随意改变位置
我实现的效果这样，后来发现是浏览器的问题，edge是正常在下面但是大小不对，
Chrome在右边，左边随浏览器大小改变位置，Firefox在下面大小完全符合
但是导师说你不能决定客户用什么浏览器（o.o）
dalalist的位置尝试了一上午没解决，甚至css设置也不起作用，想不通，最后发现几篇博客这么说
那么一切推翻，不用datalist了，直接用input+li
通过百度综合，实现了需求
template的
<div class="parent-item">
<input
v-model="parentid"
placeholder="请输入:"
class="input"
@focus="showParent = true"
@input="changeInput(parentid)"
@blur="listBlur"
/>
<ul class="form-ul" v-show="showParent">
<li v-for="(item,index) in match" :key="index" @click="parentid =
item">{{item}}</li>
</ul>
</div>
script的
<script>
export default {
data() {
return {
parentid:null,//input绑定的v-model数据
showParent: false, //下拉框显示
parentList: ['中国电信天眼系统1', '电信天眼系统2', '中国电标天眼3',
'中国电标天眼系统4', '中国天眼6','中国天眼5', '电标天眼系统7',
'中国电标天眼系统8', '电标天眼9']
};
},
//模糊查询
computed: {
match() {
if (this.parentid !== '') {
return this.parentList.filter(item => item.includes(this.parentid))
}
return this.parentList
}
},
//先提起保留一份
mounted() {
this.copyParent = this.parentList;
},
methods: {
//失去焦点隐藏下拉框
listBlur() {
setTimeout(() => {
this.showParent = false;
}, 200);
},
//得到焦点
changeInput(val) {
// this.parentList = this.copyParent.filter(item => {
// return item == val;
// });
//初始为空展示所有数据
if (val == "" || val == null) {
this.parentList = this.copyParent;
}
},
},
};
</script>
css样式
<style lang = "stylus">
.parent-item {
margin-top :200px;
position: relative;
.input{
width:200px;
position: absolute;
}
.form-ul {
list-style: none;
padding: 0;
margin: 0;
position: absolute;
top: 35px;
z-index: 100;
width: 200px;
border: $borderStyle;
max-height: 200px;
overflow-y: auto;
li {
padding: 6px;
cursor: pointer;
text-align: center;
}
}
}
</style>
大体实现了功能，有一个bug，初始进入页面点击输入框没有下拉显示所有列表内容，
需要在输入框输入内容才能解锁全部功能
2022.11.11 下午
经过研究优化了一下，解决了刷新浏览器点击输入框不能下拉展示所有数据的bug
改动标红
template的
<div class="parent-item">
<input
v-model="parentid"
placeholder="请输入:"
class="input"
@focus="changeInput(parentid),showParent = true"
@blur="listBlur"
/>
<ul class="form-ul" v-show="showParent">
<li v-for="(item,index) in match" :key="index" @click="parentid =
item">{{item}}</li>
</ul>
</div>
script的
<script>
export default {
data() {
return {
parentid:'',//input绑定的v-model数据
showParent: false, //下拉框显示
parentList: ['中国电信天眼系统1', '电信天眼系统2', '中国电标天眼3',
'中国电标天眼系统4', '中国天眼6','中国天眼5', '电标天眼系统7',
'中国电标天眼系统8', '电标天眼9']
};
},
//模糊查询
computed: {
match() {
if (this.parentid !== '') {
return this.parentList.filter(item => item.includes(this.parentid))
}
return this.parentList
}
},
//先提起保留一份
mounted() {
this.copyParent = this.parentList;
},
methods: {
//失去焦点隐藏下拉框
listBlur() {
setTimeout(() => {
this.showParent = false;
}, 200);
},
//得到焦点
changeInput(val) {
// this.parentList = this.copyParent.filter(item => {
// return item == val;
// });
//初始为空展示所有数据
if (!val) {
this.parentList = this.copyParent;
}
},
},
};
</script>