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下拉框效果,并且可以在文本框和下拉列表中加入自己定义的小图标, ...
随机推荐
- maven学习(六)依赖、聚合、继承
先说一下概念(个人理解的,有问题请留言): 依赖:我要盖一座房子,就需要很多的砖,这些专就是盖房子的一个依赖.我要跑一个maven项目,需要各种各样的功能,功能实现的jar包和插件就是我的依赖. 聚合 ...
- 使用cocostudio 需要在Android.mk文件的配置
直接贴上Android.mk文件吧. 对了,是cocos2d3.0的,不知道2.x是否一样. LOCAL_PATH := $(call my-dir) include $(CLEAR_VARS) LO ...
- Linux ->> <user_name> not in the sudoers file. This incident will be reported.
昨天在用sudo命令执行mkdir命令的时候发生了错误.错误提示如下: hadoop@master:/home$ sudo mkdir /home/hadoop [sudo] password for ...
- Linux下TC使用说明 & 使用备注 ZZ
一.TC原理介绍 Linux操作系统中的流量控制器TC(Traffic Control)用于Linux内核的流量控制,主要是通过在输出端口处建立一个队列来实现流量控制. Linux流量控制的基本原理如 ...
- yii2框架安装运行init.bat报错php.exe不是内部或外部命令
在安装yii2框架的时候,遇到一个很纠结的问题.就是当我把安装包下载下来之后,在公司的电脑安装可以正常,当我回家用自己的电脑安装就报错,提示 php.exe 不是内部或外部命令,也不是可运行的程序.这 ...
- July 19th 2017 Week 29th Wednesday
Rather than envy others, it is better to speed up their own pace. 与其羡慕他人,不如加快自己的脚步. The envy of othe ...
- ezmorph-1.0.6.jar的作用
使用json时要依赖的jar文件,在使用jquery的json时,没有引用该文件的时候容易报错.
- SOJ3266 Birthday
Time Limit: 1000MS Memory Limit: 65536 K Description Today is Windy's birthday. What can I say? Inpu ...
- Javascript 中 Array的 sort()和 compare()方法
Javascript 中 Array的 sort()方法其实是把要排序的内容转化为string(调用 toString()), 然后按照字符串的第一位 ascii 码先后顺序进行比较,不是数字. 我们 ...
- [原创] 腾讯RTX二次开发相关的一些注意事项
在企业即时通信方面,腾讯的RTX在国内的占有率应该是很高的 所以,就避免不了要与其他系统进行消息集成 腾讯为此提供了二次开发的工具包,支持JAVA.C#.VB等多种开发语言 但是,目前为止,腾讯官方提 ...