Filament•6mo ago

TextInput with an autocomplete function

I look for a solution to use a autocomplete in a TextInput field. Select is not a solution because the user must also use own values. Values comes from api. At the moment I don't found any solution

6 Replies

dissto•6mo ago

datalist ?

KodaOP•6mo ago

@dissto with datalist I can't get dynamic data from an api. The value comes from api and is refresh with every input

dissto•6mo ago

Why not?

TextInput::make('manufacturer')
    ->datalist(function(){
    return Api::all(); // something like that ... or however you retreive your data?!
})

TextInput::make('manufacturer')
    ->datalist(function(){
    return Api::all(); // something like that ... or however you retreive your data?!
})

Or what do you mean?

KodaOP•6mo ago

Thank you. I have forgot that I have try a few days before. But I don't geht a option to select the values

->live(debounce:400)
                            ->autocomplete('off')
                            ->datalist(function(Set $set, $state) {
                                $data = [];
                                if($state != null) {
                                    $data = (new MyService())->autocomplete($state);
                                }
                                return $data;
                            })

->live(debounce:400)
                            ->autocomplete('off')
                            ->datalist(function(Set $set, $state) {
                                $data = [];
                                if($state != null) {
                                    $data = (new MyService())->autocomplete($state);
                                }
                                return $data;
                            })

$data return an array (Checked with dd($data) I think it is a problem with Safari. In Chrome it works, in Safari I don't geht a List

malebestia.•6mo ago

it seems that with safari filament it doesn't render well

Mads Møller•3mo ago

try this. works for me.

TextInput::make('some_field_name')
    ->live(debounce:400)
    ->autocomplete(false)
    ->datalist(function(Set $set, $state) {
        $data = [];
        if($state != null && Str::length($state) > 2) {
            $data = MyModel::query()
                ->select('title')
                ->where('title', 'LIKE', '%' . $state . '%')
                ->limit(5)
                ->pluck('title')
                ->toArray();
        }

        return $data;
    })
    ->required(),

TextInput::make('some_field_name')
    ->live(debounce:400)
    ->autocomplete(false)
    ->datalist(function(Set $set, $state) {
        $data = [];
        if($state != null && Str::length($state) > 2) {
            $data = MyModel::query()
                ->select('title')
                ->where('title', 'LIKE', '%' . $state . '%')
                ->limit(5)
                ->pluck('title')
                ->toArray();
        }

        return $data;
    })
    ->required(),

Gaming

Programming

TextInput with an autocomplete function