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