Search for terms in several values ​​at the same time or in an object

[CrisAlejo26]

Hello, sorry, I have a problem with the search in the combobox, it turns out that I not only want to search by the value property, I also want to search by subtitle, but it doesn't work, it doesn't do the search correctly, I thank you if you help me, I want to have several values ​​within an item and search for all of them at the same time, thank you very much:

import { Check, ChevronsUpDown } from 'lucide-react';

import { cn } from '@/lib/utils';
import { useState } from 'react';
import {
	Button,
	Command,
	CommandEmpty,
	CommandGroup,
	CommandInput,
	CommandItem,
	CommandList,
	Popover,
	PopoverContent,
	PopoverTrigger,
} from '../ui';

const frameworks = [
	{
		value: 'next.js',
		label: 'Next.js',
		subtitle: 'React framework',
	},
	{
		value: 'sveltekit',
		label: 'SvelteKit',
		subtitle: 'Svelte framework',
	},
	{
		value: 'nuxt.js',
		label: 'Nuxt.js',
		subtitle: 'Vue framework',
	},
	{
		value: 'remix',
		label: 'Remix',
		subtitle: 'React framework',
	},
	{
		value: 'astro',
		label: 'Astro',
		subtitle: 'Static site generator',
	},
];

export function Combobox() {
	const [open, setOpen] = useState(false);
	const [value, setValue] = useState('');
	const [searchTerm, setSearchTerm] = useState('');


	// Filtrar los frameworks según el término de búsqueda
	const filteredFrameworks = frameworks.filter(
		framework =>
			framework.label.toLowerCase().includes(searchTerm.toLowerCase()) ||
			framework.subtitle.toLowerCase().includes(searchTerm.toLowerCase()),
	);

	return (
		<Popover open={open} onOpenChange={setOpen}>
			<PopoverTrigger asChild>
				<Button
					variant="outline"
					role="combobox"
					aria-expanded={open}
					className="w-[200px] justify-between">
					{value
						? frameworks.find(framework => framework.value === value)?.label
						: 'Select framework...'}
					<ChevronsUpDown className="opacity-50" />
				</Button>
			</PopoverTrigger>
			<PopoverContent className="w-[300px] p-0">
				<Command>
					<CommandInput
						placeholder="Search framework..."
						onValueChange={e => setSearchTerm(e)}
					/>
					<CommandList>
						<CommandEmpty>No framework found.</CommandEmpty>
						<CommandGroup>
							{filteredFrameworks.map(framework => (
								<CommandItem
									key={framework.value}
									value={framework.value}
									onSelect={currentValue => {
										setValue(currentValue === value ? '' : currentValue);
										setOpen(false);
									}}>
									<div>
										<div>{framework.label}</div>
										<div className="text-sm text-muted-foreground">
											{framework.subtitle}
										</div>
									</div>
									<Check
										className={cn(
											'ml-auto',
											value === framework.value ? 'opacity-100' : 'opacity-0',
										)}
									/>
								</CommandItem>
							))}
						</CommandGroup>
					</CommandList>
				</Command>
			</PopoverContent>
		</Popover>
	);
}