Choices

[groxw]

Hello, I've implemented choices but there's no scroll down to select the other option, it only shows item in the page view

[robsontenorio]

@groxw Please, share your code and more context.

[groxw]

It has more than 50 option but it only shows 2 option,

I try to visit https://choices-js.github.io/Choices/

[robsontenorio]

@groxw

1) Could you send again first image with more height? It seems to be overflowed by the next element on screen.

2) When you use searchable it is supposed to be used as async search on large lists, where user will type something to quick search an option. Personally I would limit the search() method to a few records like 5 to 10.

But, in any case a scroll would be useful if you would like do display dozen of items.

[groxw]

the function of searchable is working but, when i try to scroll down for a option, it only shows, is it possible to add scrolldown without using searchable?

[robsontenorio]

@groxw Yes, definitively I will add a scroll.

For now, just add extra height at end of this page, to make more room to display more items.

Here

[groxw]

Thank you, it is amazing package i think,

[robsontenorio]

@groxw Just released 0.33.2. Please, update and let me know if everything is ok.

Note: In your case you will need extra room at end of page anyway. Because it is the last element of screen.

[groxw]

` Problem 1

• Root composer.json requires robsontenorio/mary ^0.32.2, found robsontenorio/mary[dev-choices-improvements, dev-fix-toast, dev-wip-calendar, dev-main, dev-toast, 0.22.0, ..., 0.33.2] but it does not match the constraint. `

when i try to update i found

[robsontenorio]

@groxw Do not try manually change composer.json. Update package means install it again with composer require robsontenorio/mary

[groxw]

Thankyou! It works properyly, I wonder, is is possble to Computed Properties?

[robsontenorio]

@groxw i am afraid it is about Livewire. Not this package.

[groxw]

Hello, Is it possible that input for a choices is more elastic while i add, it is like

[robsontenorio]

@groxw I will address this on next release.

[groxw]

Thanks, this package is really helpful for me

[groxw]

I've found some trouble in here, well I try to fill the id with mount function public function mount() { $this->user_id = [22, 23]; //ID of user_id }

In my choices : label="Siswa" wire:model="user_id"

                                    :options="$all_siswa"
                                    option-label="name"

                                    searchable

                                    >

It's selected but it doesnt display :

[robsontenorio]

@groxw are you sure that field name exists on your model ?

option-label="name"

[groxw]

Yes, The table users has a name column,

[robsontenorio]

Your collection is :options="$all_siswa" , so that column name must exist on that collection.

[groxw]

yes, it works properly when I select it, but when I try to fill an user_id by mount function, it's only selected and doesnt show any display, I try to fill in by ID of User (Adissya), public function mount() { $this->user_id = [23 ]; //ID of user_id } 23 is the ID of Adissya

[robsontenorio]

@groxw It is supposed to work like that.

Once you have initial selection like public $user_ids = [1, 2, 3];

You MUST to change your search() method to consider include all pre selected users, besides the search value itself, because it is responsible to fill the options list.

Note :

single choice public $user_id = 4; multiple choice public $user_ids = [1, 2, 3];

[groxw]

So it won't be able to show display option-label when I try to make initial value?

[robsontenorio]

The <x-choices> needs a list of options. In some way you must determine what items will be in the list.

You MUST to change your search() method to consider including all pre selected users, besides the search value itself, because it is responsible to fill the options list.

public function search(string $value){

    // Load initial users from `public $users_id = [1,2,3];`
    $preUsers = User::whereIn('id', $this->users_id)->get();

   // search THEN append $preUsers
   // Because the search() is responsible for fill options list
    $this->users = User::where('name', 'like', "%{$value}%")->take(10)->get()->merge($preUsers);

}

[groxw]

public function mount()
{
    $this->user_id = [23];
    $this->all_siswa = User::role('siswa')->where('group_id', $this->user->group_id)->get();
}

public function search(string $value = '') 
{

    $preUsers = User::whereIn('id', $this->user_id)->get();
    $this->all_siswa = User::search($value)
                      ->get()
                      ->append($preUsers);
}

and my blade :

                                    <x-choices
                                    label="Siswa"
                                    wire:model="user_id"
                                    :options="$all_siswa"
                                    searchable

                                    >

It's still not showing any display in input, but it's selected when i try to open option of choices, what am i missing ? then when i try to search it return error because the function of 'append' it gives a collection not array_merge(): Argument #2 must be of type array, Illuminate\Database\Eloquent\Collection given

[robsontenorio]

@groxw It was a bug on choices int. Just released "0.33.3". Please, upgrade.

And change ->append($preUsers) to ->merge($preUsers). It is Laravel collection stuff, so you can include it wherever you want.

[groxw]

well thanks! its working

[robsontenorio]

@groxw Just fixed on "0.33.4" multiple choices auto grow. Upgrade and try it.

[groxw]

Sure! Thanks @robsontenorio, it's really great UI

[bucari]

Hi, i have the same problem using choices not displaying any result

my blade is

                        <x-choices 
                            label="Autore"  
                            wire:model="user_id"  
                            :options="$users"       
                            search-function="searchAutore"
                            no-result-text="Nessun risultato trovato..."
                            searchable />

and searchAutore function

    public function searchAutore(string $value = '') {

        $this->users = User::where('name', 'ilike', '%'. $value . '%')
                ->get();
    }

What's wrong?

Then, in my opinion, it shouldn't display the scroll bar when there's no result to display

[groxw]

Have you declare of variable $users in mount()? $this->users = User::all();

[robsontenorio]

@bucari see this https://github.com/robsontenorio/mary/issues/6#issuecomment-1704318807

[robsontenorio]

@bucari Just improved Choices docs. See a more comprehensive example about multiple searchable https://mary-ui.com/docs/components/choices#searchable

[bucari]

Hi, i think this is not a good solution, my users table has over 22.000 records, and i don't want to load all users in the mount function. If x-choice i ssearchable, in my case, it should reamain empty until i write something to search.

[robsontenorio]

@bucari did you notice ->take(x) ?

[bucari]

ok i use it in this way

    public function searchAutore(string $value = '')
    {
        if (strlen($value)>=3) {
            $this->users = User::query()
                ->where('name', 'ilike', "%" . $value . "%")
                ->orderBy('cognome')
                ->get();

        }
        else
            $this->users = User::query()
            ->where('name', 'ilike', "%" . $value . "%")
            ->take(0)
            ->orderBy('cognome')
            ->get();

        $preUser = null;
        if ($this->user_id) {
            // Also load selected users, besides result search
            $preUser = User::find($this->user_id)->get();

            $this->users->merge($preUser); // <--- make it appear on list
        }

    }

but i think it shouldn't run a query at all