统一应用程序（uView）选择下拉框添加模糊搜索

<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" :list="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>