VantUI下拉搜索框实现方法、输入搜索框方法（基于Vue）

在Vue前端开发中，常用的ElementUI是有下拉搜索框的，便于搜索查找一些较多数据的内容

但是移动端VantUI默认是没有这个搜索框的

于是我简单的做了一个适配移动端的下拉搜索框，效果如下：

通过弹出的选择框加上搜索功能即可，附上主要实现代码

**HTML**

<div id="root">
            <h2>VantUI下拉搜索功能</h2>
            <van-field label="所属部门" readonly clickable required placeholder="点击选择所在部门" @click="showPicker=true" :value="value"></van-field>
            <van-popup v-model="showPicker" position="bottom">
                <!-- v-model.trim 对关键字进行去空处理 @input 输入框自身属性，对输入的值进行实时检测 -->
                <van-field clickable v-model.trim="keyvalue" left-icon="search" placeholder="搜索所在部门" @input="search"></van-field>
                <van-picker show-toolbar :columns="filterdepartments" @confirm="onConfirm" @cancel="showPicker=false"> </van-picker>
            </van-popup>
</div>

**JS**

new Vue({
    el: "#root",
    mounted() {
        //  挂载时，将原数组给到需要过滤的数组
        this.filterdepartments = this.departments;
    },
    data() {
        return {
            // 下拉框选择的值
            value: "",
            // 搜索框的关键字
            keyvalue: "",
            // 过滤数组
            filterdepartments: null,
            // 原数组
            departments: [
                { text: "销售部", value: "XSB" },
                { text: "市场部", value: "SCB" },
                { text: "研发部", value: "YFB" },
                { text: "人力资源部", value: "RLZYB" },
                { text: "财务部", value: "CWB" },
                { text: "采购部", value: "CGB" },
                { text: "生产部", value: "SCB" },
                { text: "品质部", value: "PZB" },
                { text: "物流部", value: "WLB" },
            ],
            showPicker: false,
        };
    },
    methods: {
        // 输入框搜索方法
        search() {
            // 对过滤数组进行操作，返回符合条件的数组
            this.filterdepartments = this.departments.filter((params) => {
                return params.text.includes(this.keyvalue);
            });
        },
        // 弹窗方法
        onConfirm(value) {
            this.value = value.text;
            this.showPicker = false;
        },
    },
});

具体实现思路：

1.在弹出框<van-popup>中加上一个输入框<van-field>

2.通过此输入框绑定input方法，对用户输入的关键字进行过滤搜索

3.对搜索的结果进行动态展示

完整的demo案例放在下方链接中

 下拉搜索框完整文件