uniapp 可搜索下拉框

基于uniapp官方的picker实现（也可以自定义select）。.

查询返回数据集之后先备份成backupData。
增加一个输入框，用来输入要模糊查询的内容。
增加一个“定位”按钮，用于把模糊内容查出来。
增加一个“恢复”按钮，用于还原搜索前的数据。
增加一个函数，支持传入目标数据的对象对应key，通过indexOf > -1的方式把所有符合条件的项都过滤出来，形成一个新的array，用于显示到当前页面。也可以通过传后台，让后台把模糊搜索的数据返回到前端的方式。
增加一个函数，直接把最新的array覆盖成备份数据backupData，用于还原搜素。

代码样例：

<template><view><view >这是个下拉</view> <picker @change="bindBzChange" :value="bzIndex"   :range-key="'DEPARTNAME'"  :range="bzArray"><view class="uni-input">{{bzArray[bzIndex].DEPARTNAME || ''}}</view></picker><view>模糊搜索：<input placeholder="请输入搜索关键字" v-model="searchKey" /></view><view style="margin-top: 10rpx; display: flex; flex-direction: row;"><button  size="default" type="mini" @tap="locate()">定位</button><button  size="default" type="mini" @tap="restore()">还原</button></view></view>
</template><script>export default {data() {return {// 初始化一个默认空值，防止报错bzArray: [{DEPARTNAME:'',ORG_CODE:''}],// 当前选中的下标，触发change事件后需要跟着变bzIndex: 0,// 模糊搜索的内容searchKey: '',// 备份的下拉数据backupSet: []}},onLoad(option) {// 页面加载的时候读取下拉数据this.initSelect()},methods: {/*** 支持传入搜索key* @param {Object} skey*/locate(skey) {if (!skey) {skey = 'DEPARTNAME'}// 这是临时下拉数据let arrSet = []// js直接处理 二选一for (let item of this.bzArray) {if (item[skey].indexOf(this.searchKey) > -1) {arrSet.push(item);}}this.bzArray = arrSet// 后端处理 二选一let that = thisuni.request({url:'http://ip:port/app/path?skey='+skey,success(res) {// ...that.bzArray = res.arrSet},fail(e) {// ...}})},restore() {// 使用备份数据还原this.bzArray = this.backupSet},initSelect() {let that = thislet url = `请求数据的URL`uni.request({url: url,success:function(res){// 赋初值that.bzArray = res.data.obj;// 备份数据(备份数据只能在加载的时候赋值一次，否则数据就跑丢了)that.backupSet = that.bzArray;},fail: (err) => {console.info(`失败了。。。。。${JSON.stringify(err)}`);uni.showToast({title: "请求服务器失败！",icon:'none',duration:2000})}})},bindBzChange: function(e) {console.log('picker发送选择改变，携带值为', e.target.value)this.bzIndex = e.target.value;this.currentDepartId = this.bzArray[this.bzIndex].ORG_CODE;},}}
</script><style></style>

uniapp 可搜索下拉框相关推荐

vue uniapp 微信小程序搜索下拉框模糊搜索
vue uniapp 微信小程序搜索下拉框模糊搜索话不多说直接贴代码 template <template><view class="index"> ...
layui 数据表格下拉框_layui-table-column-select（layui数据表格可搜索下拉框select）
layui-table-column-select 在layui table的基础上对表格列进行扩展:点击单元格显示可搜索下拉列表. 码云地址:https://gitee.com/kkk12/layu ...
关键词SEO相关搜索/下拉框/优化系统/按天扣费系统全开源
介绍: 关键词SEO相关搜索/下拉框/优化系统/按天扣费系统全开源系统支持关键词相关搜索.下拉框优化点击搜索支持:微信.宝.易宝这个系统是对接第三方的,本身没有优化功能的网盘下载地址: htt ...
layui 带按钮的搜索框_layui table可输入关键字搜索下拉框（select）
layui-table-column-select 在layui table的基础上对表格列进行扩展:点击单元格显示可搜索下拉列表. 一.介绍此项目是为了解决layui table表格单元格(col ...
下拉搜索词api接口、淘宝搜索下拉框选词api，淘宝下拉词接口，淘宝搜索的下拉词推荐接口、关键词推荐api
一.下拉搜索框选词api介绍淘宝搜索下拉框选词是通过淘宝.天猫.手机润宝搜索下拉框查询淘宝搜索指数高.流量高.转化率高的关键词,并获取各关键词对应的在线相关宝贝数量及其推荐属性词.对于查询到的这些关 ...
下拉 html 实现原理,百度搜索下拉框实现技术原理分析
问:百度搜索下拉框关键词是怎么来的,下拉框实现技术原理分析一下. 来自百度站长平台的站长回答: 对于词的研究,想必每个seoer都知道,而除了比较热门的百度相关搜索词之外,百度下拉框关键词应该也是不少 ...
微信小程序搜索下拉框排名原理及使用方法「干货」
自从2017年1月份微信推出小程序以来,小程序的火热程度大家是有目共睹的,从一开始的精确搜索,到后面的模糊搜索,小程序的更新速度远远超过了外界的期待!虽然小程序目前已经有五十几个入口,但是关键词搜索这 ...
【Python与SEO】搜狗微信搜索下拉框词采集多线程/异步采集源码公布
随意写了一下,更多可关注本渣渣微信公众号:二爷记!! 欢迎与本渣渣交流!!! 运行效果: 搜狗微信搜索下拉框词采集核心代码参考: #微信搜索下拉词采集 #首发:微信公众号:二爷记 #author:微信 ...
bootstrap搜索下拉框：bootstrap-select
实现bootstrap搜索下拉框,本文采用bootstrap-select插件:bootstrap-select插件依赖jquery1.8+和bootstrap, 所以需要先引入jquery和boot ...

uniapp 可搜索下拉框

uniapp 可搜索下拉框相关推荐

最新文章

热门文章