Auto-Fill Form Inputs From 3rd-Party API

Filament 3
Also available in Filament 4/5 version

Demonstrates how to get some data from external (or internal) API to automatically fill some of the form inputs. In this case, we're choosing the address, and Filament auto-fills its separate parts into the text boxes.

Screenshot 2023-10-13 at 11.21.42

Get the Source Code:

Only This Example

$9

One-time payment

Full source code for Auto-Fill Form Inputs From 3rd-Party API
Downloadable ZIP file with the source code
Lifetime access to this example
GitHub Sign in with GitHub to buy

Sign in first, then complete your $9 checkout.

Best value — all 174 examples

FilamentExamples Membership

$99 /year
or
$199 lifetime
Access to code of all 174 examples
Future new examples and updates included
FilaCheck Pro package licence included
MCP server included
View membership plans

30-day money-back guarantee

How it works

This example uses the CustomerResource where it has a select input called address in the form.

This address select input has a live() so that after a value is selected, the server request would be sent, and other input values would be set.

The dehydrated(false) is used because this field value doesn't need to be sent when the form is saved or updated.

The searchable() method allows select input to be searchable.

To have a custom search, we use the getSearchResultsUsing() method and call a getAddress method from the AddressesService internal service.

->getSearchResultsUsing(fn (string $search): array => (new AddressesService())->getAddress($search))

The AddressesService makes an API call and returns the formatted result as an array.

app/Services/AddressesService.php:

class AddressesService
{
public function getAddress(string $search): array
{
$results = Http::get(config('app.url') . '/api/addresses?search=' . $search)->json();
 
return collect($results)
->mapWithKeys(function ($result): array {
return [$result['id'] => $result['street'] . ', ' . $result['postcode'] . ', ' . $result['city']];
})
->toArray();
}
}

This API is internal. The route for it is...

The FULL tutorial is available after the purchase: in the Readme file of the official repository you would get invited to.