uni |
您所在的位置：网站首页 › uniapp下拉搜索 › uni |
uni
|
uni-app (uView) select下拉框添加模糊搜索
转载
mob604756ef5a44 2021-09-22 15:10:00 文章标签 搜索 数据 css 下拉框 ico 文章分类 Java 后端开发 先看效果：
因为uniapp内置的下拉查询是没有输入模糊搜索的，有的列表选项过多时还是需要这个搜索功能，所以只能自己筛选 （前台、后台两种方法）。 下面是代码： 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 } } }打赏 赞 收藏 评论 分享 举报 上一篇：mui、拍照、个推推送消息【问题链接】 下一篇：Java++：用户认证-基于 jwt 和 session 的区别和优缺点 |
【本文地址】
今日新闻 |
推荐新闻 |