前几天做一个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是我定义了用来干别的事的,可以忽略,

itemToString:如何显示内容,{item => (item ? item.text : '')}item代表集合中的一项,有点像是java的lambda写法,如果item不是null就使用item的text属性,否则为""
onInputChange:搜索框改变时触发的函数,附代码:
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; }

从所有的集合元素里比较谁匹配此搜索词,然后操作集合对象

onChange:选项改变时触发的函数,这里就不贴代码了,其实就是把选择的这一条数据传给调用的方法,然后我们保存到一个变量上,更新时从变量取就行了.
initialSelectedItem:默认选择哪一项,

{storeArray.find(o => o.value === deviceStore.storeId)}
从集合对象中遍历,找出value等于某个变量的数据,
 
我遇到的一些问题:
1.默认选中的项第一次加载后,再次呼出这个页面就会变成最开始的哪一项,
问题根源,我加载这个弹窗(这个可搜索下拉框是在一个弹窗里的),是根据一个boolean变量加载的,但是这个变量的加载位置是在这个form上而不是弹窗上,我改成弹窗根据boolean变量加载就好了,每一次关闭再打开就会重新加载初始化,默认选中项也会重新选中
2.显示的位置不能存在内容一样的选项
选择框的显示内容也就是value的值不可以存在相同的情况,这个控件认为选项们应该是各不相同的,我一开始是在名字后面跟上id,大家也可以用别的方法解决,后来项目需求改了店铺名不可以重复我又去掉了

ComboBox可搜索下拉框的使用注意事项,简单记录以及我遇到的一些奇怪的bug的更多相关文章

  1. layui-table-column-select(layui数据表格可搜索下拉框select)

    layuiTableColumnSelect 在layui table的基础上对表格列进行扩展:点击单元格显示可搜索下拉列表. 码云地址:https://gitee.com/yangqianlong9 ...

  2. Combo Select – jQuery可搜索下拉框插件

    今天用到另一款jq插件..插件就是无脑,,引入相关文件,开始撸吧 引入相关文件: <link href="~/Scripts/combo-select/combo.select.css ...

  3. element-ui select可搜索下拉框无法在IOS或Ipad调起小键盘输入法

    参考:https://segmentfault.com/q/1010000021748033 原因:常规select是可以调起小键盘的.但是element-ui的select其实是input.并且这个 ...

  4. WordPress博客插件程序:搜索下拉框openSug

    百度搜索框下拉提示Wordpress组插件. 下载地址:https://www.opensug.org/faq/wp-content/uploads/2018/12/opensug.wordpress ...

  5. jquery 仿百度搜索下拉框的插件

    转载地址:http://www.open-open.com/lib/view/open1420624048437.html 今天写了个下拉插件分享出来 效果: , 可以搜素,也可以使用上下键选择匹配出 ...

  6. z-blog博客组插件openSug.js百度搜索下拉框提示代码

      z-blog安装openSug插件即可获得带有“搜索框提示”功能的搜索框,让z-blog搜索更便捷! https://www.opensug.org/.../opensug_z-blog_v1.0 ...

  7. Discuz论坛搜索下拉框插件openSug

    Discuz!只需安装openSug插件即可获得带有“搜索框提示”功能的搜索框,让您的Discuz搜索更便捷! 下载:https://www.opensug.org/faq/.../opensug.d ...

  8. Vuejs搜索下拉框

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 由于抽签HT For Web ComboBox下拉框组件

    传统HTML5的下拉框select仅仅能实现简单的文字下拉列表,而HT for Web通用组件中ComboBox不仅可以实现传统HTML5下拉框效果,并且可以在文本框和下拉列表中加入自己定义的小图标, ...

随机推荐

  1. maven学习(六)依赖、聚合、继承

    先说一下概念(个人理解的,有问题请留言): 依赖:我要盖一座房子,就需要很多的砖,这些专就是盖房子的一个依赖.我要跑一个maven项目,需要各种各样的功能,功能实现的jar包和插件就是我的依赖. 聚合 ...

  2. 使用cocostudio 需要在Android.mk文件的配置

    直接贴上Android.mk文件吧. 对了,是cocos2d3.0的,不知道2.x是否一样. LOCAL_PATH := $(call my-dir) include $(CLEAR_VARS) LO ...

  3. 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 ...

  4. Linux下TC使用说明 & 使用备注 ZZ

    一.TC原理介绍 Linux操作系统中的流量控制器TC(Traffic Control)用于Linux内核的流量控制,主要是通过在输出端口处建立一个队列来实现流量控制. Linux流量控制的基本原理如 ...

  5. yii2框架安装运行init.bat报错php.exe不是内部或外部命令

    在安装yii2框架的时候,遇到一个很纠结的问题.就是当我把安装包下载下来之后,在公司的电脑安装可以正常,当我回家用自己的电脑安装就报错,提示 php.exe 不是内部或外部命令,也不是可运行的程序.这 ...

  6. July 19th 2017 Week 29th Wednesday

    Rather than envy others, it is better to speed up their own pace. 与其羡慕他人,不如加快自己的脚步. The envy of othe ...

  7. ezmorph-1.0.6.jar的作用

    使用json时要依赖的jar文件,在使用jquery的json时,没有引用该文件的时候容易报错.

  8. SOJ3266 Birthday

    Time Limit: 1000MS Memory Limit: 65536 K Description Today is Windy's birthday. What can I say? Inpu ...

  9. Javascript 中 Array的 sort()和 compare()方法

    Javascript 中 Array的 sort()方法其实是把要排序的内容转化为string(调用 toString()), 然后按照字符串的第一位 ascii 码先后顺序进行比较,不是数字. 我们 ...

  10. [原创] 腾讯RTX二次开发相关的一些注意事项

    在企业即时通信方面,腾讯的RTX在国内的占有率应该是很高的 所以,就避免不了要与其他系统进行消息集成 腾讯为此提供了二次开发的工具包,支持JAVA.C#.VB等多种开发语言 但是,目前为止,腾讯官方提 ...