Uni-app的Dcloud市场插件总结使用（一）下拉模糊查询

Uni-app他来了，实现下拉模糊查询

1.先上效果看看与您想要的效果是否一样

2.一样的话，那下面我来教你，用ctrl+cv
附上Dcloud插件市场的地址
https://ext.dcloud.net.cn/plugin?id=1261

3.导入到编辑器HbuilderX ，不用import 和components 直接用

//在template使用
<uni-combox :candidates="candidates" @input="onInput" placeholder="请选择机构"v-model="formData.organization" class="box-organization"></uni-combox>
//`candidates：就是候选字段，也就是当输入关键字搜索时，下拉所展示的内容；
//@input：这里是监听事件，当有值输入时触发，进行关键字搜索
//v-model绑定的就是输入框输入的值，从而进行更新视图// onInput(index) {var that = thisconsole.log(index)uni.request({method: "POST",header: {'content-type': 'application/json',},url: '请求接口',data: {shopName: that.formData.organization,},dataType: 'json',success: (res) => {console.log(res.data.data)that.candidatesa = res.data.dataconsole.log(that.candidatesa)//这里我的数据结构有些复杂所以要进行解析// 拿到数据之后进行for循环if (that.candidatesa !== null) {for (var i = 0; i < that.candidatesa.length; i++) {if (that.candidatesa[i].departmentname) {console.log(that.candidatesa[i].departmentname)//然后把它丢进要展示的数组里面that.candidates.push(that.candidatesa[i].departmentname)}}}//获取id提交给后台采用 find 的方法let obj = that.candidatesa.find(item => item.departmentname)that.shopid = obj.idconsole.log(99999999999)console.log(that.shopid)}});},//最后放入到@input事件// 搜索供应商名称onInput() {this.tolist()},

`
综上所述就是uniapp实现下拉模糊查询的全部过程及源码，（这是H5端的）

Uni-app的Dcloud市场插件总结使用（一）下拉模糊查询相关推荐

js插件chosen-select后台交互下拉框选择
js插件chosen-select后台交互下拉框选择 $('.chosen-select').chosen(); $(".chosen-search input").bind(&q ...
jqgrid表格下拉搜索多选框优化—使用select下拉多选插件
jqgrid表格插件应该是表格插件中最强大吧,最近项目需要使用jqgrid但又要根据项目需求进行一些私人订制,还好jqgrid的源码写清晰易懂. jqgrid有个下拉搜索的功能,我们先看下官网的展示, ...
uni app中使用图表
关于在uni app中运用图表今天写项目,需要在uni app中使用图表,我使用的是ucharts. 具体操作如下 1.下载 ucharts可以直接在uni app的插件市场下载安装. 先在插件市场 ...
uni app 自动化索引列表
uni app 自动化索引列表,官方推荐的第三方插件 https://ext.dcloud.net.cn/plugin?id=375 [{"letter": "A&quo ...
uni app 手机端导航栏自定义
uni app 手机端导航栏自定义第一步:明确顶部导航栏的构成(手机自带的顶部菜单+开发的顶部菜单栏) 获取手机自带的顶部导航栏 <view class="navigation_ba ...
切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
HBuilder X ——Uni app 学习笔记（一）
HBuilder X --Uni app 学习笔记(一) 1.pages.json配置 *pages数组中第一项表示应用启动页,数组中其他项为项目中所有页面路径. enablePullDownRefr ...
HBuilder开发旅游类APP(一) ----- 实现地图插件调用、苹果和安卓同步混合开发
HBuilder开发旅游类APP(一) ----- 实现地图插件调用.苹果和安卓同步混合开发作者:班尼科本博文内容参考了网络资源,但文章完全是本人原创,喜欢请给我点赞,转载请注明出处哦. 标签: ...
HbuilderX:uni app踩坑之uView-ui
HbuilderX:uni app踩坑之uView-ui 最近在自学uniapp,想找一个ui框架提高一下学习和开发的效率,于是就网上冲浪,浪来浪去,最后选择了uView-ui这款.其实有些框架我是有 ...

Uni-app的Dcloud市场插件总结使用（一）下拉模糊查询

Uni-app他来了，实现下拉模糊查询

Uni-app的Dcloud市场插件总结使用（一）下拉模糊查询相关推荐

最新文章

热门文章