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>
相关推荐
程序员张32 小时前
Maven编译和打包插件
java·spring boot·maven
Hello.Reader3 小时前
Redis 延迟监控深度指南
数据库·redis·缓存
ybq195133454313 小时前
Redis-主从复制-分布式系统
java·数据库·redis
weixin_472339464 小时前
高效处理大体积Excel文件的Java技术方案解析
java·开发语言·excel
小毛驴8504 小时前
Linux 后台启动java jar 程序 nohup java -jar
java·linux·jar
zwjapple4 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
DKPT5 小时前
Java桥接模式实现方式与测试方法
java·笔记·学习·设计模式·桥接模式
好奇的菜鸟6 小时前
如何在IntelliJ IDEA中设置数据库连接全局共享
java·数据库·intellij-idea
tan180°6 小时前
MySQL表的操作(3)
linux·数据库·c++·vscode·后端·mysql
像风一样自由20207 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html