uni-app（uView）select下拉框添加模糊搜索
先看效果：
因为uniapp内置的下拉查询是没有输⼊模糊搜索的，有的列表选项过多时还是需要这个搜索功能，所以只能⾃⼰筛选（前台、后台两种⽅法）。
下⾯是代码：
<template>
<u-form-item
label="产品："
prop="productCode">
<u-input
v-model="productName"
type="input"
placeholder="请选择产品"
@confirm="searchProduct"/>
<view slot="right">
<u-icon
size="40"
name="search"
color="#2979ff"
@click="searchProduct"/>
</view>
<u-select
v-model="showSelect"
:
360搜索applist="showList"
@confirm="selectClick"/>
</u-form-item>
</template>
<script>
export default {
data() {
return {
productName:'',
form: {
productCode:'',
},
rules: {
productCode: [
{
required: true,
message: '产品不能为空',
trigger: ['change', 'blur'],
}
],
},
list: [],
showList:[],
showSelect:false
}
},
methods: {
selectClick(e) {
console.log(e[0])
this.productName = e[0].label
this.form.productCode = e[0].value
},
// 模糊搜索
searchProduct(){
//⾸先判断输⼊框是否为空
if(this.productName === ''){
//this.showList是下拉框显⽰的内容，如果为空就展⽰全部数据
this.showList = this.list
//否则执⾏下⾯内容
}else{
//先清空展⽰的数据
this.showList = []
//1.前端匹配
this.showList = this.list.filter((item)=>{
return item.label.indexOf(this.productName)>=0
})
//2.后端请求接⼝匹配
//getProductByLine(this.productName).then(res => {
//    this.showList = res.data
// }).catch(err => {
// })
}
console.log(this.showList)
this.showSelect = true
}
}
}
</script>
<style lang="scss" scoped>
</style>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。