harsh-harlequin
harsh-harlequin•14mo ago

how to make select component with custom resource result keys?

I have resource url: dictionaries/items It returns json: [ { "id": 1, "name": "*Compulsory entry in fair guide", "deleted": false }, { "id": 2, "name": "1 Additional Person", "deleted": false }] I need make a Select component with searching addition by name filtering
17 Replies
kapa.ai
kapa.ai•14mo ago
Hi @mflash.. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You can create a Select component with custom resource result keys using the useSelect hook in Refine. The useSelect hook is used to fetch data from a resource and provide options for a select input. Here is an example of how you can use it: 
const { queryResult } = useSelect({  
 resource: "dictionaries/items",  
});  

const options = queryResult.data?.data.map((item) => ({  
 label: item.name,  
 value: item.id,  
}));  

return (  
 <select>  
 {options?.map((option) => (  
 <option key={option.value} value={option.value}>  
 {option.label}  
 </option>  
 ))}  
 </select>  
);  
const { queryResult } = useSelect({  
 resource: "dictionaries/items",  
});  

const options = queryResult.data?.data.map((item) => ({  
 label: item.name,  
 value: item.id,  
}));  

return (  
 <select>  
 {options?.map((option) => (  
 <option key={option.value} value={option.value}>  
 {option.label}  
 </option>  
 ))}  
 </select>  
);
In this example, useSelect is used to fetch data from the "dictionaries/items" resource. The data is then mapped to create an array of options for the select input. Each option has a label (the name of the item) and a value (the id of the item). For more information, refer to the useSelect documentation (https://refine.dev/docs/data/hooks/use-select#can-i-create-the-options-manually). Please note that this example does not include search functionality. If you want to add search functionality to your Select component, you would need to implement it yourself. The implementation would depend on how your API handles search queries. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•14mo ago
<@204169884727246849> kapa.ai is still learning and improving, please let us know how it did by reacting below
harsh-harlequin
harsh-harlequinOP•14mo ago
@kapa.ai implement your logic to component <Select mode="multiple" allowClear style={{ width: "100%" }} placeholder="Please select" />
kapa.ai
kapa.ai•14mo ago
Let me check the knowledge base for you. One moment! :books: ---------------------- Sure, you can use the useSelect hook from Refine to fetch data from your resource and provide options for the Select component. Here's how you can do it: 
import { useSelect } from "@refinedev/antd";  
import { Select } from "antd";  

const YourComponent: React.FC = () => {  
 const { selectProps } = useSelect({  
 resource: "dictionaries/items",  
 optionLabel: "name",
 optionValue: "id",
 });  

 return (
   <Select 
     {...selectProps}
     mode="multiple"
     allowClear
     style={{ width: "100%" }}
     placeholder="Please select"
   />
 );  
};  
import { useSelect } from "@refinedev/antd";  
import { Select } from "antd";  

const YourComponent: React.FC = () => {  
 const { selectProps } = useSelect({  
 resource: "dictionaries/items",  
 optionLabel: "name",
 optionValue: "id",
 });  

 return (
   <Select 
     {...selectProps}
     mode="multiple"
     allowClear
     style={{ width: "100%" }}
     placeholder="Please select"
   />
 );  
};
In this example, useSelect is used to fetch data from the "dictionaries/items" resource. The optionLabel and optionValue props are used to specify which fields from the fetched data should be used as the label and value for each option in the Select component. For more information, refer to the useSelect documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-select). Please note that this example does not include search functionality. If you want to add search functionality to your Select component, you can use the onSearch prop of the useSelect hook. Here's an example: 
const { selectProps } = useSelect({  
 resource: "dictionaries/items",  
 optionLabel: "name",
 optionValue: "id",
 onSearch: (value) => [  
 {  
 field: "name",  
 operator: "contains",  
 value,  
 },  
 ],  
});  
const { selectProps } = useSelect({  
 resource: "dictionaries/items",  
 optionLabel: "name",
 optionValue: "id",
 onSearch: (value) => [  
 {  
 field: "name",  
 operator: "contains",  
 value,  
 },  
 ],  
});
In this example, the onSearch prop is used to specify how the search query should be handled. The field prop specifies which field should be searched, the operator prop specifies how the search query should be compared to the field values, and the value prop specifies the search query. For more information, refer to the onSearch documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-select#onsearch). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•14mo ago
<@204169884727246849> kapa.ai is still learning and improving, please let us know how it did by reacting below
harsh-harlequin
harsh-harlequinOP•14mo ago
@kapa.ai give me full code
kapa.ai
kapa.ai•14mo ago
Let me check the knowledge base for you. One moment! :books: ---------------------- Sure, here is the full code for a component that uses the useSelect hook from Refine to fetch data from your resource and provide options for the Select component: 
import React from 'react';
import { useSelect } from '@refinedev/core';
import { Select } from 'antd';

const YourComponent: React.FC = () => {
  const { selectProps } = useSelect({
    resource: "dictionaries/items",
    optionLabel: "name",
    optionValue: "id",
  });

  return (
    <Select 
      {...selectProps}
      mode="multiple"
      allowClear
      style={{ width: "100%" }}
      placeholder="Please select"
    />
  );
};

export default YourComponent;
import React from 'react';
import { useSelect } from '@refinedev/core';
import { Select } from 'antd';

const YourComponent: React.FC = () => {
  const { selectProps } = useSelect({
    resource: "dictionaries/items",
    optionLabel: "name",
    optionValue: "id",
  });

  return (
    <Select 
      {...selectProps}
      mode="multiple"
      allowClear
      style={{ width: "100%" }}
      placeholder="Please select"
    />
  );
};

export default YourComponent;
In this example, useSelect is used to fetch data from the "dictionaries/items" resource. The optionLabel and optionValue props are used to specify which fields from the fetched data should be used as the label and value for each option in the Select component. For more information, refer to the useSelect documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-select). Please note that this example does not include search functionality. If you want to add search functionality to your Select component, you can use the onSearch prop of the useSelect hook. Here's an example: 
import React from 'react';
import { useSelect } from '@refinedev/core';
import { Select } from 'antd';

const YourComponent: React.FC = () => {
  const { selectProps } = useSelect({
    resource: "dictionaries/items",
    optionLabel: "name",
    optionValue: "id",
    onSearch: (value) => [
      {
        field: "name",
        operator: "contains",
        value,
      },
    ],
  });

  return (
    <Select 
      {...selectProps}
      mode="multiple"
      allowClear
      style={{ width: "100%" }}
      placeholder="Please select"
    />
  );
};

export default YourComponent;
import React from 'react';
import { useSelect } from '@refinedev/core';
import { Select } from 'antd';

const YourComponent: React.FC = () => {
  const { selectProps } = useSelect({
    resource: "dictionaries/items",
    optionLabel: "name",
    optionValue: "id",
    onSearch: (value) => [
      {
        field: "name",
        operator: "contains",
        value,
      },
    ],
  });

  return (
    <Select 
      {...selectProps}
      mode="multiple"
      allowClear
      style={{ width: "100%" }}
      placeholder="Please select"
    />
  );
};

export default YourComponent;
In this example, the onSearch prop is used to specify how the search query should be handled. The field prop specifies which field should be searched, the operator prop specifies how the search query should be compared to the field values, and the value prop specifies the search query. For more information, refer to the onSearch documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-select#onsearch). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•14mo ago
<@204169884727246849> kapa.ai is still learning and improving, please let us know how it did by reacting below
harsh-harlequin
harsh-harlequinOP•14mo ago
@kapa.ai when i typing, there no filtering the results
kapa.ai
kapa.ai•14mo ago
Let me check the knowledge base for you. One moment! :books: ---------------------- I'm sorry for the confusion, but the useSelect hook from Refine does not support client-side search out of the box. The onSearch prop in the useSelect hook is used to handle server-side search. When you type in the Select component, it sends a request to the server with the search query, and the server is responsible for filtering the results based on the query. If your server does not support search queries, you will not see any filtering when you type in the Select component. You will need to implement search functionality on your server. Here's an example of how you can use the onSearch prop: 
const {{ selectProps }} = useSelect({{  
 resource: "dictionaries/items",  
 optionLabel: "name",
 optionValue: "id",
 onSearch: (value) => [  
 {{  
 field: "name",  
 operator: "contains",  
 value,  
 }},  
 ],  
}});  
const {{ selectProps }} = useSelect({{  
 resource: "dictionaries/items",  
 optionLabel: "name",
 optionValue: "id",
 onSearch: (value) => [  
 {{  
 field: "name",  
 operator: "contains",  
 value,  
 }},  
 ],  
}});
In this example, the onSearch prop is used to specify how the search query should be handled. The field prop specifies which field should be searched, the operator prop specifies how the search query should be compared to the field values, and the value prop specifies the search query. For more information, refer to the onSearch documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-select#onsearch). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•14mo ago
<@204169884727246849> kapa.ai is still learning and improving, please let us know how it did by reacting below
harsh-harlequin
harsh-harlequinOP•14mo ago
harsh-harlequin
harsh-harlequinOP•14mo ago
@kapa.ai how to use multiple selectProps prop with different resource in the same component?
kapa.ai
kapa.ai•14mo ago
Let me check the knowledge base for you. One moment! :books: ---------------------- You can use multiple useSelect hooks in the same component with different resources. Each useSelect hook will return a selectProps object that you can spread into a Select component. Here's an example: 
import React from 'react';
import { useSelect } from '@refinedev/core';
import { Select } from 'antd';

const YourComponent: React.FC = () => {
  const { selectProps: selectProps1 } = useSelect({
    resource: "resource1",
    optionLabel: "name",
    optionValue: "id",
  });

  const { selectProps: selectProps2 } = useSelect({
    resource: "resource2",
    optionLabel: "name",
    optionValue: "id",
  });

  return (
    <div>
      <Select 
        {...selectProps1}
        mode="multiple"
        allowClear
        style={{ width: "100%" }}
        placeholder="Please select from resource1"
      />
      <Select 
        {...selectProps2}
        mode="multiple"
        allowClear
        style={{ width: "100%" }}
        placeholder="Please select from resource2"
      />
    </div>
  );
};

export default YourComponent;
import React from 'react';
import { useSelect } from '@refinedev/core';
import { Select } from 'antd';

const YourComponent: React.FC = () => {
  const { selectProps: selectProps1 } = useSelect({
    resource: "resource1",
    optionLabel: "name",
    optionValue: "id",
  });

  const { selectProps: selectProps2 } = useSelect({
    resource: "resource2",
    optionLabel: "name",
    optionValue: "id",
  });

  return (
    <div>
      <Select 
        {...selectProps1}
        mode="multiple"
        allowClear
        style={{ width: "100%" }}
        placeholder="Please select from resource1"
      />
      <Select 
        {...selectProps2}
        mode="multiple"
        allowClear
        style={{ width: "100%" }}
        placeholder="Please select from resource2"
      />
    </div>
  );
};

export default YourComponent;
In this example, two useSelect hooks are used to fetch data from "resource1" and "resource2" respectively. The optionLabel and optionValue props are used to specify which fields from the fetched data should be used as the label and value for each option in the Select components. For more information, refer to the useSelect documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-select). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•14mo ago
<@204169884727246849> kapa.ai is still learning and improving, please let us know how it did by reacting below
harsh-harlequin
harsh-harlequinOP•14mo ago
@kapa.ai i need to make a form, with 2 gorizontal fileds 1 field - is Select component 2 fileds - is Input component
kapa.ai
kapa.ai•14mo ago
Let me check the knowledge base for you. One moment! :books: @mflash. That's a great question, but unfortunately I am only capable of responding to a maximum of five questions per thread. Don't hesitate to create a new thread for any further questions you have though. I'm here to help!

Did you find this page helpful?