Select Component Lazy Loading though API
I use external API as the source of options for my select component.
Is there anyway to make it support the pagination of the api? which means load more data once the user scrolled to the end of shown records? either by auto calling the api and pass param page=1/2/3.. or the user click on show more button or smth' similar?
My current code:
here is how i use the component:
and here is my getGeneralTopicOptions method:
Is there anyway to make it support the pagination of the api? which means load more data once the user scrolled to the end of shown records? either by auto calling the api and pass param page=1/2/3.. or the user click on show more button or smth' similar?
My current code:
here is how i use the component:
Select::make('general_topic_id')
->label('General topic')
->searchable()
->options(fn ($get) => $this->getGeneralTopicOptions($get, null))
->getSearchResultsUsing(fn ($get, string $search) => $this->getGeneralTopicOptions($get, $search))
->disabled(fn ($get) => !$get('org_library_access_authorization_id'))
->reactive()
->placeholder('Select a general topic'),and here is my getGeneralTopicOptions method:
private function getGeneralTopicOptions($get, $search): array
{
$orgLibraryAccessAuthorizationId = $get('org_library_access_authorization_id');
if (empty($orgLibraryAccessAuthorizationId)) {
return [];
}
$generalTopics = ReferenceCurriculumService::getGeneralTopics($orgLibraryAccessAuthorizationId, $this->course->subject_code, $search);
return collect($generalTopics)->mapWithKeys(function ($topic) {
return [$topic['id'] => $topic['name']];
})->toArray();
}
