Combining preloaded options and search results in Forms\Components\Select
Good day, everyone! I would like to improve user experience with choosing a client from a list in a resource form.
The current solution is based on getSearchResultsUsing. I do search in the DB when user enters a few chars. However, the delay for the search is a bit worse than I used to have in my old admin panel with React.
I would like to preload 50-100 most frequent clients in the Select to get instant search results, but I still need to append the Select list with the other not so frequent clients I found in the DB when the user types something in the input.
Can you please give me the direction to solve this. Would appreciate it!
Solution:Jump to solution
If your problem is the delay for the search from the FRONT-END, it is called by the default debounce parameter of 1 second, to avoid sending multiple server requests each time user types something.
You can lower that debounce to almost 0, but keep in mind then with every typed character you may send an unnecessary server request
Docs: https://filamentphp.com/docs/3.x/forms/fields/select#tweaking-the-search-debounce...
2 Replies
Solution
If your problem is the delay for the search from the FRONT-END, it is called by the default debounce parameter of 1 second, to avoid sending multiple server requests each time user types something.
You can lower that debounce to almost 0, but keep in mind then with every typed character you may send an unnecessary server request
Docs: https://filamentphp.com/docs/3.x/forms/fields/select#tweaking-the-search-debounce
@PovilasKorop yes, you were correct about the front-end source of the delay.
Thank you for the tip! It got much better.
I tested it with the debugbar and found out the value of 250 ms to be the lowest one that makes no extra requests when I type 3-4 chars.
I've also cut out requests to DB under 2 chars length
->searchDebounce(250)
->getSearchResultsUsing(fn (string $search): array =>
mb_strlen($search) > 1
?
Client::->where('name', 'like', '%'.mb_strtolower($search).'%')->limit(10)->pluck('name', 'id')->toArray()
:
[])