constant-blue•14mo ago

Can you have multiple fields for onSearch in a select?

My select combines 3 fields into the label, when trying to add an onSearch to the select I am able to set it up to filter by 1 of the 3 fields but when I try to add additional fields then it doesn't find any thing

5 Replies

kapa.ai•14mo ago

Hi @erekyu. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You can add multiple fields to the onSearch function in the useSelect hook. The onSearch function should return an array of objects, each representing a filter condition. Each object should have a field, operator, and value property. Here's an example of how you can set it up to filter by multiple fields:

const { options, onSearch } = useSelect<ICategory>({  
 resource: "categories",  
 onSearch: (value) => [  
 {  
 field: "field1",  
 operator: "contains",  
 value,  
 },
 {  
 field: "field2",  
 operator: "contains",  
 value,  
 },
 {  
 field: "field3",  
 operator: "contains",  
 value,  
 },  
 ],  
});

const { options, onSearch } = useSelect<ICategory>({  
 resource: "categories",  
 onSearch: (value) => [  
 {  
 field: "field1",  
 operator: "contains",  
 value,  
 },
 {  
 field: "field2",  
 operator: "contains",  
 value,  
 },
 {  
 field: "field3",  
 operator: "contains",  
 value,  
 },  
 ],  
});

In this example, the onSearch function will filter the options where field1, field2, or field3 contains the search value. If you're still having trouble, make sure that the fields you're trying to filter by actually exist in the data you're working with. Also, note that the onSearch function will override any existing filters. For more information, you can refer to the Refine documentation on useSelect (https://refine.dev/docs/api-reference/core/hooks/useSelect). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•14mo ago

<@66380739771379712> kapa.ai is still learning and improving, please let us know how it did by reacting below

constant-blue•14mo ago

@kapa.ai this is my current onSelect code:

const { selectProps: ownerSelectProps } = useSelect({
    resource: "customer-profiles",
    fetchSize: 20,
    optionLabel: "fullName",
    optionValue: "id",
    metaData: { 
      populate: { 
        mailingAddress: {
          populate: "*"
        },
      },
    },
    queryOptions: {
      select: (data) => {
        return {
          data: data?.data?.map((item: any) => ({
            ...item,
            
            fullName: `${item.firstName} ${item.lastName} - ${item.mailingAddress.street}`
          })),
          total: data.total
        };
      }
    },
    onSearch: (value) => [  
      {  
      field: "lastName",  
      operator: "contains",  
      value,  
      }, 
      ],  
  });

const { selectProps: ownerSelectProps } = useSelect({
    resource: "customer-profiles",
    fetchSize: 20,
    optionLabel: "fullName",
    optionValue: "id",
    metaData: { 
      populate: { 
        mailingAddress: {
          populate: "*"
        },
      },
    },
    queryOptions: {
      select: (data) => {
        return {
          data: data?.data?.map((item: any) => ({
            ...item,
            
            fullName: `${item.firstName} ${item.lastName} - ${item.mailingAddress.street}`
          })),
          total: data.total
        };
      }
    },
    onSearch: (value) => [  
      {  
      field: "lastName",  
      operator: "contains",  
      value,  
      }, 
      ],  
  });

If I add 2 additional field searches like you suggest none of them work

kapa.ai•14mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The onSearch function in your useSelect hook is currently set to filter by the lastName field. If you want to filter by additional fields, you can add more objects to the array returned by the onSearch function. Each object should represent a filter condition with a field, operator, and value property. However, it's important to note that the field property should correspond to a field in the data you're working with. In your case, it seems like you're combining multiple fields (firstName, lastName, and mailingAddress.street) into a single fullName field. If you want to filter by any part of the fullName, you might need to adjust your backend to support this, as the onSearch function in useSelect can only filter by fields that exist in the data. Here's an example of how you can set up onSearch to filter by multiple fields:

onSearch: (value) => [  
  {  
    field: "firstName",  
    operator: "contains",  
    value,  
  },
  {  
    field: "lastName",  
    operator: "contains",  
    value,  
  },
  {  
    field: "mailingAddress.street",  
    operator: "contains",  
    value,  
  },  
],

onSearch: (value) => [  
  {  
    field: "firstName",  
    operator: "contains",  
    value,  
  },
  {  
    field: "lastName",  
    operator: "contains",  
    value,  
  },
  {  
    field: "mailingAddress.street",  
    operator: "contains",  
    value,  
  },  
],

In this example, the onSearch function will filter the options where firstName, lastName, or mailingAddress.street contains the search value. If you're still having trouble, it might be due to how your backend handles the filter conditions. The backend should be set up to handle multiple filter conditions and apply them correctly to the data. For more information, you can refer to the Refine documentation on useSelect (https://refine.dev/docs/api-reference/core/hooks/useSelect). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•14mo ago

<@66380739771379712> kapa.ai is still learning and improving, please let us know how it did by reacting below