Limit number of displayed options

[Laubeee]

Similar to #205 but with a way simpler approach, analogous to LIMIT BY in SQL.

Noone is going to manually scroll through hundreds or thousands of items anyway if there is a search functionality, so simply restricting rendering to the top N elements would be neat.

[Laubeee]

For anyone interested I am doing this manually now using

import { defaultFilter } from 'cmdk';

  const [search, setSearch] = React.useState('');

  const filteredData = React.useMemo(() => {
    if (!search) return data.slice(0, 100);

    return data
      .map(item => ({ ...item, score: defaultFilter(item.value as string, search) }))  // Use the internal cmdk filter to get the relevance score
      .filter(item => item.score > 0)
      .sort((a, b) => b.score - a.score) // Sort by highest score first
      .slice(0, 100);
  }, [data, search]);

with

<Command shouldFilter={false}>
  <CommandInput placeholder='Search...' onValueChange={setSearch} />
  <CommandList>
    <CommandEmpty>No matching entry found.</CommandEmpty>
    <CommandGroup>
      {filteredData.map(item => (
        <CommandItem
          key={item.value}
          value={item.value}
          onSelect={currentValue => {
            setSearch(''); // Reset search on select
          }}>
          {item.label}
          <CheckIcon className={cn('ml-auto h-4 w-4', value === item.value ? 'opacity-100' : 'opacity-0')} />
        </CommandItem>
      ))}
    </CommandGroup>
  </CommandList>
</Command>