首页 > 其他分享 >shadcn/ui Combobox command 组合筛选下拉

shadcn/ui Combobox command 组合筛选下拉

时间:2024-09-02 20:25:49浏览次数:9  
标签:name inputVal popularList Combobox item ui && shadcn any

<Popover open={open} onOpenChange={setOpen}>
          <PopoverTrigger asChild>
            <Button
              role="combobox"
              aria-expanded={open}
              className="w-full justify-between h-11 bg-background rounded-lg search-supplier-popover"
            >
              <span className="flex items-center text-gray  text-sm">
                <Image
                  src="/images/supplier.svg"
                  alt="supplier"
                  decoding="async"
                  loading="lazy"
                  width={24}
                  height={24}
                  className="w-6 h-6 mr-2"
                ></Image>
                {searchVal ? <span className='text-white'>{searchVal}</span> : <span className='text-gray'>{t("SUPPLIER_TEXT_TIP")}</span>}
              </span>
              {open ? <BiSolidUpArrow className='text-gray w-3 h-3' /> : <BiSolidDownArrow className='text-gray w-3 h-3' />}
            </Button>
          </PopoverTrigger>
          <PopoverContent asChild className="py-0 px-2" style={{ width: pxToRem(contentWidth) }}>
            <Command className='pt-2'>
              <CommandInput
                placeholder={t("SUPPLIER_INPUT_TEXT_TIP")}
                ref={inputItemRef}
                value={inputVal}
                onValueChange={(val: string) => onValueChange(val)}
                className="h-9 text-white "
                endIconNode={inputVal ? <Image src={'/images/inputClear.svg'} width={20} height={20} alt='clear' /> : <></>}
                endIconClick={() => endIconClick()}
              />
              <CommandList className="px-2 pt-2">
                <CommandGroup className="" heading=''>
                  {filterList?.length === 0 && <CommandEmpty>{t('SUPPLIER_TEXT_TIP_NO_DATA')}.</CommandEmpty>}
                  {!inputVal && popularList?.length > 0 && (
                    <>
                      <SearchTitle title={t('SUPPLIER_LINE_TITLE_TIP')} />
                      {popularList && popularList.map((item: any) => <SearchItem key={item.id} item={item}></SearchItem>)}
                    </>
                  )}
                </CommandGroup>
                {!inputVal && searchSupplierList?.length > 0 && <SearchTitle title={t('SUPPLIER_LINE_TITLE_TIP_ALL')} />}
                <CommandGroup className="" heading=''>
                  {
                    filterList?.map((item: any) => <SearchItem key={item.id} item={item}></SearchItem>)
                  }
                </CommandGroup>
              </CommandList>
            </Command>
          </PopoverContent>
        </Popover >

  

  const SearchItem = ({ item }: any) => {
    return (
      <CommandItem
        value={item.name}
        onSelect={currentValue => onselect(currentValue)}
        className="space-y-0.5 px-0 h-8"
      >
        <div className="flex justify-between items-center flex-1">
          <span className="text-[#99A4B0]">{item.name}</span>
          <span className="text-xs text-[#FFD205]">{item.gamesNumber}</span>
        </div>
      </CommandItem>
    )
  }

  切记name搜索的时候value写name,否则会默认搜索,打空格之后匹配不到结果

标签:name,inputVal,popularList,Combobox,item,ui,&&,shadcn,any
From: https://www.cnblogs.com/xiaoyaoweb/p/18393463

相关文章

  • Arduino_ESPC3学习笔记
    1、环境搭建(1)官网下载:Arduino-Home(2)配置首选项点灯科技(diandeng.tech)资源下载,点击下载文件——>首选项——>开发管理地址添加开发板地址:https://arduino.me/packages/esp32.json下载社区打包的esp32安装包,直接运行,程序会自动解压到相应位置。重启Arduino配置......
  • 收银系统源码-收银台ui自定义
    收银系统在很多门店日常经营中,使用率是非常高的。商品采购、出入库、商品销售、会员管理、线上商城订单核销等都离不开收银系统,很多门店的收银员是使用线下收银台时,想根据的操作习惯以及个人喜好调整收银台。1.调整收银台的整体ui收银台ui风格,收银员可以根据自己的个人喜好去自定......
  • OBCE 第三章实验 内存管理手动实践 深入了解Queuing(buffer)表
    实验环境:oceanbase企业版V31-1-1架构。1.查看当前资源情况selectunit_config_id,name,max_cpu,min_cpu,round(max_memory/1024/1024/1024)max_mem_gb,round(min_memory/1024/1024/1024)min_mem_gb,round(max_disk_size/1024/1024/1024)max_disk_size_gbfrom__......
  • “由于找不到 acui23.dll 无法执行代码”专家级修复教程:详尽步骤助您重启应用程序
    当您尝试运行AutoCAD或其他依赖acui23.dll文件的应用程序时,可能会遇到“由于找不到acui23.dll无法执行代码”的错误提示。这通常意味着系统中缺少必要的动态链接库文件或存在兼容性问题。本文将详细解释这个问题的原因,并提供多种解决方法,帮助您顺利运行应用程序。acui2......
  • UUIDV7: 我就是要用UUID做主键
    一直以来的互联网谣言:UUID是不适合用作数据库主键的.为什么?因为UUID是全随机的,对于数据库的索引不友好,插入时可能导致大量的索引树的分支合并.UUID根据RFC4122的描述,UUID被设计用于去中心化的ID生成格式128bit,16个字节,示例:f81d4fae-7dec-11d0-a765-00a0c91e6......
  • UUIDV7: 我就是要用UUID做主键
    一直以来的互联网谣言:UUID是不适合用作数据库主键的.为什么?因为UUID是全随机的,对于数据库的索引不友好,插入时可能导致大量的索引树的分支合并.UUID根据RFC4122的描述,UUID被设计用于去中心化的ID生成格式128bit,16个字节,示例:f81d4fae-7dec-11d0-a765-00a0c91e6......
  • Arduino基础入门学习——使用DHT11温湿度传感器获取温湿度
    使用DHT11温湿度传感器获取温湿度一、前言二、DHT11介绍三、准备工作四、程序代码五、运行结果六、结束语一、前言老规矩,再来一句名言激励激励大家,当然,也激励自己(狗头):             读书百遍,其义自见。——晋·陈寿二、DHT11介绍DHT11采用单总线......
  • ffmpeg错误Invalid audio stream. Exactly one MP3 audio stream is required. Could
    错误消息Invalidaudiostream.ExactlyoneMP3audiostreamisrequired.Couldnotwriteheaderforoutputfile#0(incorrectcodecparameters?):InvalidargumentErrorinitializingoutputstream0:0--OnlyAACstreamscanbemuxedbytheADTSmuxerCoul......
  • 迅为电子RK3588S开发板第三章Buildroot系统功能测试
      iTOP-3588S开发板采用瑞芯微RK3588S处理器,是全新一代AloT高端应用芯片,采用8nmLP制程,搭载八核64位CPU(四核Cortex-A76+四核Cortex-A55架构),集成MaliG610MP4四核GPU,内置AI加速器NPU,算力达6Tops,支持8K视频硬件编码器和硬件解码器,提供了许多功能强大的嵌入式硬件引擎,性能更强......
  • 折腾 Quickwit,Rust 编写的分布式搜索引擎-官方配置详解
    Nodeconfiguration(节点配置)节点配置允许您为集群中的各个节点自定义和优化设置。它被分为几个部分:常规配置设置:共享的顶级属性Storage(存储)设置:在storage部分定义https://quickwit.io/docs/configuration/node-config#storage-configurationMetastore(元存储)设置:在metastore......