useSelect local search

i dont want to make api call when users type in search input

4 Replies

kapa.ai•12mo ago

Hi @dreamer9067. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- If you want to perform client-side filtering instead of making an API call every time a user types in the search input, you can achieve this by passing the onSearch function as undefined. This will disable the server-side filtering and will filter the options on the client-side. Here is an example of how you can do this:

const { selectProps } = useSelect({  
 resource: "categories",  
});  
  
const [searchValue, onSearchChange] = useState("");  
  
<Select  
 {...selectProps}  
 onSearch={undefined}  
 onSearchChange={onSearchChange}  
 searchValue={searchValue}  
/>;

const { selectProps } = useSelect({  
 resource: "categories",  
});  
  
const [searchValue, onSearchChange] = useState("");  
  
<Select  
 {...selectProps}  
 onSearch={undefined}  
 onSearchChange={onSearchChange}  
 searchValue={searchValue}  
/>;

In this example, the onSearch function is set to undefined, which disables server-side filtering. The searchValue and onSearchChange properties are used to enable the search input. For more details, you can refer to the refine documentation (https://refine.dev/docs/api-reference/mantine/hooks/useSelect). If you want to delay the search until the user finishes typing, you can use the React Transition API. This allows you to prioritize one event over another. For instance, you can show the user what they are entering but wait to start the search until the user finishes typing. Here is an example:

import {startTransition} from 'react';  
  
// Set the input value but don't initiate the search  
setInputValue(input);  
  
startTransition(() => {  
 // Set the final search value, then initiate search  
 setSearchQuery(input);  
});

import {startTransition} from 'react';  
  
// Set the input value but don't initiate the search  
setInputValue(input);  
  
startTransition(() => {  
 // Set the final search value, then initiate search  
 setSearchQuery(input);  
});

For more details, you can refer to the refine blog post (https://refine.dev/blog/react-suspense-guide) on React Suspense and Transitions. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•12mo ago

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

conscious-sapphire•12mo ago

Hello @dreamer9067 , bot seems right

sensitive-blue•12mo ago

yep thanks