uniapp 下拉框带实时搜索picker

win

                        <picker @change="bindPickerChange($event,aicheList)" :value="index" :range="aicheList" range-key="cid">

                                <view class="uni-input">
                                        <input class="iputong" type="text" @input="getList" v-model="cid" placeholder="输入关键字" />
                                </view>
                        </picker>

//介绍 @change="bindPickerChange($event,aicheList)" =获取选中的值，:value="index"=不知道，:range="aicheList"=数组，range-key="cid"=字段的值。
//@input="getList"=获取焦点，把数据实时提交到后台检索数据， v-model="cid"=传入后台要检索的数据值这里我统一用的cid是因为我需要picker获取后复制到input里。
下面是JS了
<script>
        import {
                mapState,
                mapMutations
        } from 'vuex'
        export default {

                data() {
                        return {
                                value: '',//这里一开始我是放在input里的，现在换成了CID，可以忽略。
                                //数据
                                aicheList: [],
                                index: 0,
                                cid: '',
                                userid: '',//用户的ID不需要可以忽略
                        }
                },


methods: {
                       
                        //下拉框取值
                        bindPickerChange: function(e, storage) {
                                console.log('picker发送选择改变，携带值为：' + e.detail.value)//请忽略
                                this.index = e.target.value
                                this.cid = storage[this.index].cid         //这是取到的值storage配合的是picker @change="bindPickerChange($event,aicheList)"
                                console.log(this.cid)//请忽略
                                this.index = e.detail.value
                        },

//读取后台数据
getList: function() {

                                uni.request({
                                        url: 'https://',
                                        method: 'POST',
                                        dataType: 'json',
                                        data: {
                                                userid: this.userid,//用户的ID可忽略
                                                value: this.cid,//这里是从input里要检索的内容，下面看后台就明白了
                                        },
                                        success: res => {
                                                //console.log(res.data.data);
                                                this.aicheList = res.data.data;//全部的数据
                                                this.total = res.data.total;//这里我做了一个统计，请忽略

                                        },

                                })
                        },

}
}

win

tp5后台代码

//保养列表
public function baoyang_biao(){

    //查询POST过来的数据
    $userid = Request::param('userid');//用户的ID
    $val = Request::param('value');//这就是前端input里的CID

    // 查询出当前页数显示的数据//若果为空查询用户所有数据
    if($val == null) {
        $hdata = BaoyangModel::where(['sjid' => $userid, 'cd' => 1])
            ->order('ci', 'desc')
            ->select();
//统计，如果用不到可忽略
        $total= count(BaoyangModel::where(['sjid' => $userid, 'cd' => 1])
            ->order('ci', 'desc')
            ->select());
    }else{
        $hdata = BaoyangModel::where(['sjid' => $userid, 'cd' => 1])
            ->whereLike('didian|btime|cid',"%".$val."%")
            ->order('ci', 'desc')
            ->select();
//统计，如果用不到可忽略
        $total = count(BaoyangModel::where(['sjid' => $userid, 'cd' => 1])
            ->whereLike('didian|btime|cid',"%".$val."%")
            ->order('ci', 'desc')
            ->select());
    }
    $data = [
        'code' => 0,  //status
        'msg' => '数据加载中',  //message
        'total' => $total,  //统计，如果用不到可忽略
        'data' => $hdata    //rows.item
    ];
    return json($data);//输出JSON

}

win

备注一下：这是官方自带的组件，JS中不需要引用的。如果需要CSS，请参照一下pages/picker//picker.vue,
因为本人创建项目的时候都是选择演示数据带组件、接口、模板的。