ComboBox可搜索下拉框的使用注意事项,简单记录以及我遇到的一些奇怪的bug
前几天做一个react的项目的时候需要用一个可搜索的下拉框ComboBox,上代码:
<ComboBox
// className={comboxClassName}
items={storeArray}
itemToString={item => (item ? item.text : '')}
onInputChange={this.handleEnterpriseSearch}
onChange={this.changeStore}
initialSelectedItem={storeArray.find(o => o.value === deviceStore.storeId)}
selectedItem={storeArray.find(o => o.value === deviceStore.storeId)}
/>
items:加载此下拉框时使用什么集合,下面的查询这个集合的方法:
const res = await api.get(`/device/storeList`);
res.data.forEach((o) => {
let deviceItem = {
"value": o.uid,
"name": o.name,
"text": o.name,
};
storeArray.push(deviceItem);
deviceStore.storeArray = storeArray;
storeArrayAll = storeArray;
});
value是选项的值,text是显示的文字,name是我定义了用来干别的事的,可以忽略,
handleEnterpriseSearch = async (v) => { if (!v) {
storeArray = storeArrayAll;
return;
}
const val = v;
console.log(val);
let arr = [];
for (let index = 0; index < storeArrayAll.length; index++) {
const element = storeArrayAll[index];
if(element.text.indexOf(val) >= 0){
arr.push(element);
}
}
storeArray = arr; }
从所有的集合元素里比较谁匹配此搜索词,然后操作集合对象
ComboBox可搜索下拉框的使用注意事项,简单记录以及我遇到的一些奇怪的bug的更多相关文章
- layui-table-column-select(layui数据表格可搜索下拉框select)
layuiTableColumnSelect 在layui table的基础上对表格列进行扩展:点击单元格显示可搜索下拉列表. 码云地址:https://gitee.com/yangqianlong9 ...
- Combo Select – jQuery可搜索下拉框插件
今天用到另一款jq插件..插件就是无脑,,引入相关文件,开始撸吧 引入相关文件: <link href="~/Scripts/combo-select/combo.select.css ...
- element-ui select可搜索下拉框无法在IOS或Ipad调起小键盘输入法
参考:https://segmentfault.com/q/1010000021748033 原因:常规select是可以调起小键盘的.但是element-ui的select其实是input.并且这个 ...
- WordPress博客插件程序:搜索下拉框openSug
百度搜索框下拉提示Wordpress组插件. 下载地址:https://www.opensug.org/faq/wp-content/uploads/2018/12/opensug.wordpress ...
- jquery 仿百度搜索下拉框的插件
转载地址:http://www.open-open.com/lib/view/open1420624048437.html 今天写了个下拉插件分享出来 效果: , 可以搜素,也可以使用上下键选择匹配出 ...
- z-blog博客组插件openSug.js百度搜索下拉框提示代码
z-blog安装openSug插件即可获得带有“搜索框提示”功能的搜索框,让z-blog搜索更便捷! https://www.opensug.org/.../opensug_z-blog_v1.0 ...
- Discuz论坛搜索下拉框插件openSug
Discuz!只需安装openSug插件即可获得带有“搜索框提示”功能的搜索框,让您的Discuz搜索更便捷! 下载:https://www.opensug.org/faq/.../opensug.d ...
- Vuejs搜索下拉框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 由于抽签HT For Web ComboBox下拉框组件
传统HTML5的下拉框select仅仅能实现简单的文字下拉列表,而HT for Web通用组件中ComboBox不仅可以实现传统HTML5下拉框效果,并且可以在文本框和下拉列表中加入自己定义的小图标, ...
随机推荐
- Redis 实现分布式锁
前言 分布式锁一般有三种实现方式:1. 数据库乐观锁:2. 基于Redis的分布式锁:3. 基于ZooKeeper的分布式锁.本篇博客将介绍第二种方式,基于Redis实现分布式锁.虽然网上已经有各种介 ...
- java几种基本排序算法
1.选择排序 原理:将数组的每一个元素和第一个元素相比较,如果小于第一个元素则交换,选出第一小的,依次选出第二小,第三小的.... 代码 int[] a = {1,3,2,5}; int i,j,te ...
- 从尾到头打印链表(C++和Python 实现)
(说明:本博客中的题目.题目详细说明及参考代码均摘自 “何海涛<剑指Offer:名企面试官精讲典型编程题>2012年”) 题目 输入一个链表的头结点, 从尾到头反过来打印出每个结点的值. ...
- [使用教程]cocostudio之UI编辑器动画模式
有坑! 1. 使用 (1)点击动画模式按钮,进入动画模式 (2)[关键1]左下角动作列表,右键添加动画 (3)[关键2]渲染区选择要动画的控件,右键编辑动画 * 可以看到最下面多了关键帧 (4)在右边 ...
- Windows 编译 MQTT C++ Client
MQTT MQTT(Message Queuing Telemetry Transport,消息队列遥测传输)是IBM开发的一个即时通讯协议,有可能成为物联网的重要组成部分.该协议支持所有平台,几乎可 ...
- HTTP 中状态码 302的使用场景
一直都知道302是临时重定向,可是不懂为什么要用这个,直到看到了这个 这样就可以用一个URL,来访问其他的URL上的资源了,非常的nice
- crm动态载入js库
function load_script(url) { var xmlHTTPRequest; if (window.ActiveXObject) { xmlHTTPR ...
- Yii自定义验证规则
简单的方法:在 model 内部定义规则 最简单的定义验证规则的方法是在使用它的模型(model)内部定义. 比方说,你要检查用户的密码是否足够安全. 通常情况下你会使用 CRegularExpres ...
- CF587F Duff is Mad
题目 有趣的思想 首先暴力的话,自然是对每一个询问在\(AC\)自动机上跑一遍\(k\),看看跑出来的节点在\(fail\)树到根的路径上有多少个\(l\)到\(r\)之间的结束标记就好了 我们发现无 ...
- 【[USACO13NOV]没有找零No Change】
其实我是点单调队列的标签进来的,之后看着题就懵逼了 于是就去题解里一翻,发现楼上楼下的题解说的都好有道理, f[j]表示一个再使用一个硬币就能到达i的某个之前状态,b[now]表示使用那个能使状态j变 ...