Autocomplete: can't render options when extending Tom Select

[noneofyourbusinessbaby]

Hi UX team 👋

I'm working with @symfony/ux-autocomplete (with AssetMapper + Stimulus) and having trouble getting options to render when using either the custom load() function or static data. I might be doing somthing wrong but can't find it.

What I'm doing

I'm customizing the options in a Stimulus controller using the autocomplete:pre-connect event, reffering to https://symfony.com/bundles/ux-autocomplete/current/index.html#extending-tom-select.

Here's my controller:

// assets/controllers/custom-autocomplete_controller.js
import { Controller } from '@hotwired/stimulus';

export default class extends Controller {
    initialize() {
        this._onPreConnect = this._onPreConnect.bind(this);
        this._onConnect = this._onConnect.bind(this);
    }

    connect() {
        this.element.addEventListener('autocomplete:pre-connect', this._onPreConnect);
        this.element.addEventListener('autocomplete:connect', this._onConnect);
    }

    disconnect() {
        // You should always remove listeners when the controller is disconnected to avoid side-effects
        this.element.removeEventListener('autocomplete:connect', this._onConnect);
        this.element.removeEventListener('autocomplete:pre-connect', this._onPreConnect);
    }

    _onPreConnect(event) {
        event.detail.options.valueField = 'value';
        event.detail.options.labelField = 'text';
        event.detail.options.searchField = 'text';
        event.detail.options.load = (query, callback) => {
            const url = '/custom-autocomplete?q=' + encodeURIComponent(query);
            fetch(url)
                .then(response => response.json())
                .then(json => {
                    callback(
                        [
                            {
                                "value" : 1, "text": 'value 1'
                            },
                            {
                                "value" : 2, "text": 'value 2'
                            }
                            ]
                    );
                }).catch(()=>{
                callback();
            });
        };
    }

    _onConnect(event) {
    }
}

This how I use it in my form :

        $builder
            ->add('test', ChoiceType::class, [
                'mapped' => false,
                'autocomplete' => true,
                'attr' => [
                    'data-controller' => 'custom-autocomplete'
                ]
            ])
        ;

This is the relevant part of composer.json:

{
    "symfony/ux-autocomplete": "^2.21",
    "symfony/asset-mapper": "7.3.*",
    "symfony/stimulus-bundle": "^2.18"
}

What I have checked

• The callback() is called with an array of valid items. But nothing appears in the dropdown, even though autocomplete:connect fires and no errors are shown.

• JSON format is correct

• searchField is set to text, and items match the query

• The dropdown does not populate

• The Tomselect object is correctly initialized upon connection.

Thanks for the awesome tooling, any advice appreciated !

PS. This is an oversimplification of my code, I could have used the autocomplete_url option for now. The endpoint I meant to use expects multiple query parameters.

[Kocal]

Hi!

Given the comment from https://github.com/symfony/ux/blob/2.x/src/Autocomplete/assets/src/controller.ts#L260-L262 and examples in https://tom-select.js.org/examples/remote/, can you try to replace your arrow function (query, callback) => with function (query, callback) { } ?

[noneofyourbusinessbaby]

Thanks for your answer. Initially the arrow function call wasn't failing, I tried your suggestion but it didn't work either.