Custom Search on Picker

[zhamann]

The current functionality on the Picker's built-in search always filters results by label. It would be helpful to have the ability to disable this functionality in favor of implementing a custom search.

My current use case for this is showing a list of cities, but allowing the user to search by either the city name or a related zip code. Currently, when searching by zip code, all results are immediately excluded by the built-in filtering.

// Component has been condensed for example purposes

default function LocationSearch() {
  const [locations, setLocations] = useState<Location[]>([]);
  const [filteredLocations, setFilteredLocations] = useState<Location[]>([]);

  function handleSearch(query: string) {
    const lowerQuery = query.toLowerCase();
    const results = locations.filter((location) =>
      location.city.toLowerCase().includes(lowerQuery) ||
      location.zipCodes.some((zip) => zip.startsWith(query))
    );
    setFilteredLocations(results);
  }

  return (
    <Picker
      showSearch
      onSearchChange={handleSearch}
      items={filteredLocations.map((loc) => ({
        label: loc.city,
        value: loc.index,
      }))}
    />
  );
}