uni-app的下拉搜索选择组合框

​🌈个人主页:前端青山

🔥系列专栏:Vue篇

🔖人终将被年少不可得之物困其一生

依旧青山,本期给大家介绍uni-app中一款可以搜索下拉选择输入框的插件

下拉搜索选择组合框

superwei-combox 组合框

uni-app中可下拉搜索选择框uni-combox组件

插件地址

superwei-combox 组合框 - DCloud 插件市场

下载插件包导入HBuilderX

下拉选择效果
输入数据效果

需要输入数据时需要启用是否允许用户创建新条目(isAllowCreate=true),开启之后可以让用户输入搜索内容或者创建新内容进行提交,返回后重新渲染可继续进行下拉选择

两种数据模式
JSON数据格式
非JSON数据格式
属性
属性名 类型 默认值 说明
label String - 标签文字
value String - combox的值
labelWidth String auto 标签宽度,有单位字符串,如:'100px'
placeholder String - 输入框占位符
candidates Array/String [] 候选字段
emptyTips String 无匹配项 无匹配项时的提示语
selectedBackground String #f5f7fa 选中项背景颜色
selectedColor String #409eff 选中项文字颜色
isJSON Boolean false 候选字段是否是json数组
keyName String - json数组显示的字段值
disabledColor String #ababac 禁用项文字颜色
isAllowCreate Boolean true 是否允许用户创建新条目
事件
事件称名 说明 返回值
@input combox输入事件 返回combox输入值
@select combox选择事件 返回combox选项值

案例实现

当我们需要获取到输入的数据和用户下拉选择的数据时,我们可以根据它的这两个@input事件和@select事件来实现,那么当你获取到后端数据并且需要提交数据传给后端时,可以定义一个变量inputMethod来区分用户输入还是下拉

实现效果

当我们选择输入或者下拉数据后,点击提交数据传给后端

用户选择下拉
非JSON数据格式
JSON数据格式
用户输入数据
非JSON数据格式
JSON数据格式

这样一来,我们依据一个变量就可以来判断用户选择下拉数据还是自己创建内容输入新数据来进行提交,搜索功能也是相同逻辑

实现代码

javascript 复制代码
<template>
    <view class="content" style="margin: 300px auto;">
       <span class="title">非JSON数组模式</span>
       <superwei-combox :candidates="candidates" placeholder="请选择或输入" v-model="inputValue" @input="input"
            @select="select"></superwei-combox>
       <span class="title">JSON数组模式</span>
        <superwei-combox style="width:300px" :candidates="candidates_json" :isJSON="true" keyName="name" placeholder="请选择或输入"
            v-model="inputValue_json" @input="input_json" @select="select_json"></superwei-combox>
            <button type="primary" @click="toSubmit">提交</button>
    </view>
</template>
<script>
    export default {
        data() {
            return {    
                selectValue:'',//用户输入或者下拉的数据值value
                 inputMethod: '',  // 标志位,用于区分输入和下拉选择
                inputValue: '',//非json格式
                candidates: ['选项一', '选项二', '选项三', '选项四', '选项五', '选项六', '...'],
                inputValue_json: '',
                candidates_json: [{
                    id: '1',
                    name: '选项一'
                }, {
                    id: '2',
                    name: '选项二',
                    disabled: true // 单独设置disabled后即可禁用该选项
                }, {
                    id: '3',
                    name: '选项三'
                }, {
                    id: '4',
                    name: '选项四'
                }, {
                    id: '5',
                    name: '选项五',
                    disabled: true // 单独设置disabled后即可禁用该选项
                }, {
                    id: '6',
                    name: '...'
                }]
            }
        },
​
        methods: {
            toSubmit(){
                if(this.inputMethod==='input'){
                    console.log('用户选择了输入数据',this.selectValue)
                }else if(this.inputMethod==='select'){
                    console.log('用户选择了下拉框数据',this.selectValue)
                }
            },
            //非json格式数据-start
            input(e) {
                this.inputMethod = 'input'//标志位为用户输入
                this.selectValue = e
            },
            select(e) {
                this.inputMethod = 'select'//标志位为用户下拉
                this.selectValue = e
            },
            //非json格式数据-end
            /*上半段为非json数据格式,下半段为json数据格式*/
            //json格式数据-end
            input_json(e) {
                this.inputMethod = 'input'//标志位为用户输入
                this.selectValue = e
            },
            select_json(e) {
                this.inputMethod = 'select'//标志位为用户下拉
                this.selectValue = e.name
            }
            //json格式数据-end
        }
    }
</script>
​
<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
​
    .title {
        margin-top: 20px;
    }
</style>
相关推荐
满分观察网友z2 分钟前
别小看这个滑动条!从性能灾难到用户挚爱的 uni-app Slider 踩坑实录
前端
咖啡啡不加糖2 分钟前
暴力破解漏洞与命令执行漏洞
java·后端·web安全
编程猪猪侠3 分钟前
Taro+Vue3实现微信小程序富文本编辑器组件开发指南
vue.js·微信小程序·taro
满分观察网友z5 分钟前
别再裸写<textarea>了!一个“小”功能,我用上了它几乎所有API
前端
风象南5 分钟前
SpringBoot敏感配置项加密与解密实战
java·spring boot·后端
西西木科技丨Shopify开发机构10 分钟前
如何在 Shopify 中建立重定向
前端·html
九皇叔叔15 分钟前
【7】PostgreSQL 事务
数据库·postgresql
DKPT15 分钟前
Java享元模式实现方式与应用场景分析
java·笔记·学习·设计模式·享元模式
kk在加油17 分钟前
Mysql锁机制与优化实践以及MVCC底层原理剖析
数据库·sql·mysql
汪子熙17 分钟前
深入探析 header facets:定位与应用
前端·javascript