Introduction
ProFormSelect is a powerful component in Ant Design Pro-Components that allows you to create a form with a select input. It's a great way to provide users with a list of options to choose from. However, as the number of options grows, it can become difficult for users to find the option they're looking for. In this article, we'll explore how to implement options search for Ant Design ProFormSelect to make it easier for users to find the options they need.
Search via Network Request
The first approach to implement options search for Ant Design ProFormSelect is to use a network request to fetch the options based on the user's input. This approach is useful when you have a large number of options and you don't want to load them all at once. You can use the request prop of ProFormSelect to specify a function that fetches the options based on the user's input. Here's an example of how you can implement options search using a network request:
<ProFormSelect
showSearch
name="country"
label="Country"
request={async (value) => {
// The user's input
const keywords = value.keyWords;
// Fetch the options based on the user's input
const response = await fetch(`/api/countries?q=${keywords}`);
const data = await response.json();
return data;
}}
/>
In this example, we use the request prop to specify an asynchronous function that fetches the options based on the user's input. The function takes the user's input as an argument and returns a promise that resolves to the options. When the user types in the input, the function is called with the user's input, and the options are fetched based on the input.
But this implementation has its drawbacks. It requires a network request for every user input, which can lead to a lot of requests and slow down the user interface. To address this issue, we can use the second approach.
Search within Loaded Options
The second approach to implement options search for Ant Design ProFormSelect is to load all the options at once and then filter them based on the user's input. This approach is useful when you have a moderate number of options and you want to avoid making network requests for every user input. The trick to this approach is to cache the options in the state when loaded at the first time and filter them based on the user's input. Here's an example of how you can implement options search within loaded options:
const [options, setOptions] = useState();
<ProFormSelect
showSearch
name="country"
label="Country"
request={async (value) => {
let opts = options;
// Load the options if not already loaded
if (!opts) {
const response = await fetch(`/api/countries`);
opts = await response.json();
// Cache the options in the state
setOptions(opts);
}
// The user's input
const keywords = value.keyWords;
// Filter the options based on the user's input
const filteredOptions = opts.filter((option) =>
option.label.toLowerCase().includes(keywords.toLowerCase())
);
return filteredOptions;
}}
/>
Filter Options with filterOption Prop?
If your options are declared in code and not fetched from a network request, you can use the filterOption prop of Select to filter the options based on the user's input. Since it's an option of Select, you can find it in the fieldProps prop of ProFormSelect.
Note: The user's input action will always trigger the request function if you implemented the prop. Please handle search within the request function if your options are fetched from the request function.
The filterOption prop takes a function that filters the options based on the user's input. Here's an example of how you can use the filterOption prop to filter the options based on the user's input:
const options = [
{ value: 'china', label: 'China' },
{ value: 'usa', label: 'USA' },
{ value: 'uk', label: 'UK' },
{ value: 'germany', label: 'Germany' },
{ value: 'france', label: 'France' },
];
<ProFormSelect
showSearch
name="country"
label="Country"
options={options}
fieldProps={{
filterOption: (input, option) =>
option.label.toLowerCase().includes(input.toLowerCase()),
}}
/>
The user's input action will trigger the request function anyway. I would prefer to handle the filter just within the request function.
Conclusion
