R
Refine

ask-any-question

useSelect local search

Fflat-fuchsia8/17/2023
i dont want to make api call when users type in search input
Kkapa.ai8/17/2023
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: ----------------------
Kkapa.ai8/17/2023
<@560876002046377984> kapa.ai is still learning and improving, please let us know how it did by reacting below
Eextended-salmon8/17/2023
Hello @dreamer9067 , bot seems right
Fflat-fuchsia8/17/2023
yep thanks

Looking for more? Join the community!

R
Refine

ask-any-question

Join Server
Recommended Posts
Add Custom Fields to AuthPageHere is the AuthPage for the Register Route, and I would like to add password confirmation so the us3 high severity vulnerabilitiesRecently we're tasked to look into vulnerabilities in the code. We find that the default project crei just install refine and in the components folder i didn't find layout , title and slide foldershow can i fix thisDataGridPro filtering issueHello, I'm using DataGridPro with server side pagination, sorting, and filtering, ```ts useTable hook with post methoduseTable use useList which uses get method, i want to use post method??useModalForm seems to be invalidating all data that's present on the site, is there any way around?I'm using useModalForm to create a nested entity (say I am in the edit form of a Post and I want to Is it possible to use useTable without Sync?Lets say I want to use useTable for a dynamic searchForm inside of a Wizard. How would I deactivate tableProps Dependent on useShow() Attribute Causing ErrorHello, I have a 'show' page for a store that queries for its products by using a permanent on the pcypress auth0 loginHi, I am using Auth0 to log in to my app and the login page is hosted on the Auth0 website which ususeModalForm show() doesn't do anything after modal is opened and closed oncetitleSelect - Getting Label based on Foreign KeyHi! I have a resource `locationProducts`, which maps a 'locationID' to a 'productID' from another rAntd Filter Search Not VisibleHi! I'm following the Antd table documentation, which offers filterSearch. When I try adding it tSupabase dashboard access?Hello, I was looking for a quick prototyping tool for something im working on. After going through tTypeError: rawData.some is not a functionHeya everyone. I am running into an error that I've been trying to figure out for a few hours at t