uniapp input 输入框加下拉框模糊cha询

明日之后

[JavaScript] 纯文本查看 复制代码

<view class="navinput">
                <image :src="imgs" mode="" class="navlefts"></image>
                <input  type="text" class="input" v-model="clientname" @focus="datalist" @input="inputes" @blur="inputes" placeholder="搜索">
                <image :src="img" mode="" class="navimg" @click="scan"></image>
</view>

[JavaScript] 纯文本查看 复制代码

                this.company  总数据
                this.list     要展示的数据
                this.clientname 输入框的内容
                
                // 模糊搜索
                        inputes(){
                        //首先判断输入框是否为空
                                if(this.clientname === ''){    
                                //this.list是下拉框显示的内容，如果为空就展示全部数据
                                        this.list = this.company  
                                //否则执行下面内容
                                }else{
                                        //先清空展示的数据
                                        this.list = []
                                        //然后开始循环全部数据
                                        for(var i=0;i<this.company.length;i++){
                                                //判断数据里面是否有符合输入的内容  不符合返回-1 只需要大于或等于0就是符合
                                                         if(this.company.companyName.indexOf(this.clientname)>=0){
                                                         
                                                                        console.log(this.company.companyName)
                                                                        //然后把它丢进要展示的数组里面
                                                                        this.list.push(this.company)
                                                                        //我这里是必选项为防止用户不选择判断如有数据默认第一个
                                                                        if(this.list.length != 0){
                                                                        //在用户选择下拉框内容时会被替换掉 
                                                                                this.datasty.customerId =this.list[0].userId
                                                                                
                                                                        }
                                                        }
                                        }
                                }