DEV Community

Horacio Degiorgi
Horacio Degiorgi

Posted on

1

Dynamic datalist in filamentphp 3

Revised version , thanks Filament Team !!

The new version of filamentphp allow the updating of datalist tag in TexInput with new methods. Some tricks are needed but is possible to load datalist options from the database based on the characters inserted in input field.
The tricks:
->autocomplete('off') avoid browser tips
->live(debounce:400) activate sending info to the server
->datalist(function (?string $state, TextInput $component,?Model $record , $modelsearch='\App\Models\Metadata' , $fieldsearch='content') {

$options= $modelsearch::whereRaw($fieldsearch.' ilike \'%'.$state.'%\'')->limit(20)->pluck('content')->toarray();

})

All the code (simplified)

Forms\Components\TextInput::make('title')->label('Campo')
                ->live(debounce:400)
                ->autocomplete('off') 
                ->datalist(function (?string $state , Forms\Components\TextInput $component,?Model $record , $modelsearch='\App\Models\Metadata' , $fieldsearch='content') {
//get options from database using where and (ilike I'm a postgresql fan)
$options =[];
   if($state!=null  and Str::length($state)>=3){
                    $options= $modelsearch::whereRaw($fieldsearch.
' ilike \'%'.$state.'%\'')
->limit(20)
->pluck('content')
->toarray();
               //send options to datalist

}
return $options; 
                })

Enter fullscreen mode Exit fullscreen mode

Btw : PHP 8.0: Named Parameters ROCKS

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (1)

Collapse
 
isslerman profile image
Marcos Issler

There is any online example working of this feature? Thanks!

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more