MultiSelect search-change

[cengizbarul]

Hello, I need to listen to the text with search-change in multi-select and get data accordingly, how can I do this?

And if I edit the multiselect, won't this be lost when the package is updated, can you add the search-change feature?

[strstensky]

Hello, our multiselect uses @vueform/multiselect under the hood. We’ve released a new version of Craftable PRO (v2.0.4), where we enhanced the multiselect to fully support the functionality you need by passing the necessary props to the core Multiselect package. You can now edit Multiselect directly in the Form.vue and use async options. See an example in the documentation: https://www.npmjs.com/package/@vueform/multiselect#tags-with-async-options.

You can also pass the search function to searchChange prop, for example:

:searchChange="(query) => searchChange(query)"

You won’t need to edit the Multiselect component itself, only its props, so no need to worry about package updates. This will have no impact on your generated CRUD.

[cengizbarul]

Yes, but it doesn't work very well, this way I can work with inertia, could you please add it?

[strstensky]

There shouldn't be any issues using it with Inertia. Please share your code here, and I'll take a look at it.

[cengizbarul]

`

`

As you can see, the query data will not change in any way.

[cengizbarul]

If you add “@search-change=”($event) => $emit('search-change', $event)” in MultiSelect.vue <Multiselect, the problem will be fixed, unfortunately I always have to add it again when I update it.

[strstensky]

You can pass the searchChange function into Multiselect as a prop, like this:

:searchChange="(query) => searchChange(query)"

The function is triggered when typing into the search input.

I also edited my previous response because the emit did not work as I expected.

[cengizbarul]

Yes, worked thank you.