<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