How to use Fluxui Select and autocomplete with remote data?

[ramabie]

How to use select and autocomplete with remote data like this

https://tom-select.js.org/examples/remote/

[DanielSpravtsev]

@ramabie You can use input and generate dynamic options by the search https://fluxui.dev/components/select#dynamic-options

[ramabie]

If there are hundreds of thousands of data from options, it will be less effective

[DanielSpravtsev]

Just use ->limit()

Nobody(JavaScript framework ecosystem or Ajax-backend) would output to html thousands of records

[ramabie]

What I mean is

ScreenRecording_12-04-2024.08-17-08_1.mp4

`

new TomSelect('#select-repo',{
valueField: 'url',
labelField: 'name',
searchField: 'name',
// fetch remote data
load: function(query, callback) {

		var url = 'https://api.github.com/search/repositories?q=' + encodeURIComponent(query);
		fetch(url)
			.then(response => response.json())
			.then(json => {
				callback(json.items);
			}).catch(()=>{
				callback();
			});

	},
	// custom rendering functions for options and items
	render: {
		option: function(item, escape) {
			return `<div class="py-2 d-flex">
						<div class="icon me-3">
							<img class="img-fluid" src="${item.owner.avatar_url}" />
						</div>
						<div>
							<div class="mb-1">
								<span class="h4">
									${ escape(item.name) }
								</span>
								<span class="text-muted">by ${ escape(item.owner.login) }</span>
							</div>
					 		<div class="description">${ escape(item.description) }</div>
						</div>
					</div>`;
		},
		item: function(item, escape) {
			return `<div class="py-2 d-flex">
						<div class="icon me-3">
							<img class="img-fluid" src="${item.owner.avatar_url}" />
						</div>
						<div>
							<div class="mb-1">
								<span class="h4">
									${ escape(item.name) }
								</span>
								<span class="text-muted">by ${ escape(item.owner.login) }</span>
							</div>
					 		<div class="description">${ escape(item.description) }</div>
						</div>
					</div>`;
		}
	},
}); `

[joshhanley]

@ramabie you can do this with Livewire. You don't need to make an ajax request, you just make a Livewire request and filter the results based on the input. See my comment here for something similar #126 (comment)

[ramabie]

I usually do it like this, but when using flux ui, I still don't know how to implement it

This is an example of a script snippet

example_customer.txt

[joshhanley]

@ramabie please include code as a snippet rather than a file using triple back ticks.

When you paste code into github, you need to surround it in triple back ticks and then specify the file type like php or blade.

For example
```php
\ PHP code here
```

```blade
\ HTML and blade code here
```

[ramabie]

namespace App\Livewire\Service;

use App\Livewire\Forms\ServiceForm;
use App\Models\Customer;
use Livewire\Component;

class ServiceCreate extends Component
{
    public ServiceForm $form;

    public $modalServiceCreate = false;

    public function getCustomer($name)
    {
        return collect(Customer::select('id', 'name')->where('name', 'like', '%'.$name.'%')->get());
    }

    public function render()
    {
        return view('livewire.service.service-create');
    }
}

// component Tom
@props(['disabled' => false])

<div wire:ignore>
    <select {{ $disabled ? 'disabled' : '' }} {!! $attributes->merge(['class' => 'border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm']) !!}>
        {{ $slot }}
    </select>
</div>

// livewire.service.service-create
<div class="col-span-12" x-id="['text-input']">
    <x-label ::for="$id('text-input')" value="Customer" />
    <x-tom
        x-init="$el.customer = new Tom($el, {
            sortField: {
                field: 'name',
                direction: 'asc'
            },
            valueField: 'id',
            labelField: 'name',
            searchField: 'name',
            load: function(query, callback) {

                $wire.getCustomer(query).then(results => {
                    callback(results);
                }).catch(() => {
                    callback();
                })

            },
            render: {
                option: function (item, escape) {
                    return `<div>${escape(item.name)}</div>`
                },
                item: function (item, escape) {
                    return `<div>${escape(item.name)}</div>`
                }
            }
        });"
        wire:model="form.customer"
        ::id="$id('text-input')" class="mt-1 w-full" require>
        <option></option>
    </x-tom>
    <x-input-error for="form.customer" class="mt-1" />
</div>

[joshhanley]

@ramabie you'd do it like this

<?php

use App\Models\User;
use Livewire\Attributes\Computed;
use Livewire\Volt\Component;

new class extends Component {
    public $search;
    public $userId;

    #[Computed]
    public function users()
    {
        if (!$this->search) {
            return collect();
        }

        return User::query()
            ->when($this->search, fn($query, $search) => $query->where('name', 'like', "%$search%"))
            ->get();
    }
};

?>

<div class="p-4">
    <flux:select variant="combobox" :filter="false" wire:model.live="userId">
        <x-slot name="input">
            <flux:select.input wire:model.live="search" />
        </x-slot>

        @foreach ($this->users as $user)
            <flux:option value="{{ $user->id }}">
                {{ $user->name }}
            </flux:option>
        @endforeach
    </flux:select>
</div>

[ramabie]

Ok thanks you very much master

[joshhanley]

No worries! 🙂