[Autocomplete] No AJAX requests are being made

[vitoff34]

Hello,
I am trying to implement Autocompleter without form

The select field is not turned into tom-select as it says in the documentation.

 <select class="form-control" id="provider" name="provider"{{ stimulus_controller('symfony/ux-autocomplete/autocomplete', {url: path('ux_entity_autocomplete', { alias: 'provider' })}) }}>
                        <option value=""></option>
                    </select>

When I manually visit the link created by url: path('ux_entity_autocomplete', { alias: 'provider' } I get the results I expect.

Here is my setup:

<?php

namespace App\Autocompleter;

use App\Entity\Provider;
use Doctrine\ORM\EntityRepository;
use Doctrine\ORM\QueryBuilder;
use Symfony\Bundle\SecurityBundle\Security;
use Symfony\Component\DependencyInjection\Attribute\AutoconfigureTag;
use Symfony\UX\Autocomplete\EntityAutocompleterInterface;

#[AutoconfigureTag('ux.entity_autocompleter', ['alias' => 'provider'])]
class ProviderAutocompleter implements EntityAutocompleterInterface
{
    public function getEntityClass(): string
    {
        return Provider::class;
    }

    public function createFilteredQueryBuilder(EntityRepository $repository, string $query): QueryBuilder
    {
        return $repository
            ->createQueryBuilder('provider')
            ->andWhere('provider.name LIKE :search OR provider.slug LIKE :search')
            ->setParameter('search', '%'.$query.'%');
    }

    public function getLabel(object $entity): string
    {
        return $entity->getName();
    }

    public function getValue(object $entity): string
    {
        return $entity->getId();
    }

    public function isGranted(Security $security): bool
    {
        // see the "security" option for details
        return true;
    }
}

controllers.json

{
    "controllers": {
        "@symfony/ux-autocomplete": {
            "autocomplete": {
                "enabled": true,
                "fetch": "eager",
                "autoimport": {
                    "tom-select/dist/css/tom-select.default.css": false,
                    "tom-select/dist/css/tom-select.bootstrap4.css": false,
                    "tom-select/dist/css/tom-select.bootstrap5.css": true
                }
            }
        },
        "@symfony/ux-turbo": {
            "turbo-core": {
                "enabled": true,
                "fetch": "eager"
            },
            "mercure-turbo-stream": {
                "enabled": false,
                "fetch": "eager"
            }
        }
    },
    "entrypoints": []
}

Do I still have to initialize it somehow?
Do I need any other files likes controller.js?
Thanks

[Simon André]

Could you maybe share the rest of your code (main template + current template) to see if you missed something.

In the "other things to do" you should have included routes i guess and called importmap(app) or included app.js in your templates

[vitoff34]

What do you mean by included routes?
I have used importmap(app) yes.

This is my app.js

import $ from 'jquery';
window.$ = $;
import '@popperjs/core';
import 'bootstrap';
import './javascript/custom.js';
import './javascript/fortuna-pagination.js';
import 'daterangepicker/daterangepicker.min.css';
import './javascript/base.js';
import './styles/stylesheets/app.css';
import 'tom-select';
import 'tom-select/dist/css/tom-select.bootstrap5.css';

[Simon André]

Do you see the symfony/ux-autocomplete/autocomplete js script loaded in your web inspector ?

For the route i was refering to 'ux_entity_autocomplete' but you said the endpoint was working so that's irelevant i guess

Do you see any errors in the console ?

[vitoff34]

<script type="importmap" data-turbo-track="reload">
{
    "imports": {
        "app": "/assets/app-dafef075257014f7aaf1bee0d306db52.js",
        "@popperjs/core": "/assets/vendor/@popperjs/core/core.index-ceb5b6c0f9e1d3f6c78ef733facfdcda.js",
        "bootstrap": "/assets/vendor/bootstrap/bootstrap.index-c0423c99f6075e6b1cef7579b5c00d32.js",
        "/assets/javascript/custom.js": "/assets/javascript/custom-c0c35a25dea1a70ced13ac2fdd44aae7.js",
        "/assets/javascript/fortuna-pagination.js": "/assets/javascript/fortuna-pagination-1f150212779bdda99735b9cf26dee822.js",
        "daterangepicker/daterangepicker.min.css": "data:application/javascript,",
        "/assets/javascript/base.js": "/assets/javascript/base-c8921fd21a505e1c3d5d41f229a1d3af.js",
        "/assets/styles/stylesheets/app.css": "data:application/javascript,",
        "tom-select": "/assets/vendor/tom-select/tom-select.index-c0036889cf3e94dade1e56c11996b014.js",
        "tom-select/dist/css/tom-select.bootstrap5.css": "data:application/javascript,",
        "jquery": "/assets/vendor/jquery/jquery.index-fb3b33d7311be80ac8aa5c367205beba.js",
        "js-cookie": "/assets/vendor/js-cookie/js-cookie.index-f062605f3b735c94070fe0b40873db9b.js",
        "daterangepicker": "/assets/vendor/daterangepicker/daterangepicker.index-04ce79457f4337c6cc86d6c8b62109c6.js",
        "moment": "/assets/vendor/moment/moment.index-9082f88740626e0f130a972a7947465d.js",
        "@symfony/stimulus-bundle": "/assets/@symfony/stimulus-bundle/loader-e1ee9ace0562f2e6a52301e4ccc8627d.js",
        "/assets/@symfony/stimulus-bundle/controllers.js": "/assets/@symfony/stimulus-bundle/controllers-12d4160fd9aa6c85fcb0eea2ec2843c5.js",
        "/assets/@symfony/ux-autocomplete/controller.js": "/assets/@symfony/ux-autocomplete/controller-d18de807e29352151ef094b16fb98bb5.js",
        "/assets/@symfony/ux-chartjs/controller.js": "/assets/@symfony/ux-chartjs/controller-59b2728296b990b7a6d272b7f43a7baa.js",
        "/assets/@symfony/ux-turbo/turbo_controller.js": "/assets/@symfony/ux-turbo/turbo_controller-ce5e32dafdec0b7752f02e3e2cb25751.js",
        "/assets/controllers/hello_controller.js": "/assets/controllers/hello_controller-4410e6ed653fab1dcb0d51fcb576b2c5.js",
        "@hotwired/stimulus": "/assets/vendor/@hotwired/stimulus/stimulus.index-b5b1d00e42695b8959b4a1e94e3bc92a.js",
        "@hotwired/turbo": "/assets/vendor/@hotwired/turbo/turbo.index-0ec782120ea86cbcea9f5e0c8e1660fe.js",
        "bootstrap/dist/css/bootstrap.min.css": "data:application/javascript,document.head.appendChild%28Object.assign%28document.createElement%28%22link%22%29%2C%7Brel%3A%22stylesheet%22%2Chref%3A%22%2Fassets%2Fvendor%2Fbootstrap%2Fdist%2Fcss%2Fbootstrap.min-1712f0378f8675ca7cd423d6262fcccf.css%22%7D%29%29",
        "tom-select/dist/css/tom-select.default.css": "data:application/javascript,document.head.appendChild%28Object.assign%28document.createElement%28%22link%22%29%2C%7Brel%3A%22stylesheet%22%2Chref%3A%22%2Fassets%2Fvendor%2Ftom-select%2Fdist%2Fcss%2Ftom-select.default-92c31c033a23be0cfebdda3d089d8b11.css%22%7D%29%29",
        "chart.js/auto": "/assets/vendor/chart.js/auto-f8d4d65420070575e53375a8f7a71f0f.js"
    }
}

I do not have any errors in the console...

What files do you want me to provider for more context?

[Simon André]

You can maybe check if you have all the files were they should be : https://symfony.com/bundles/StimulusBundle/current/index.html#configuration ? 🤷‍♂️

[vitoff34]

Figured it out. For some reason I deleted './bootstrap.js' from app.js
I put only import 'bootstrap' and I am guessing it was making a wrong guess and loading bootstrap library.
Thanks for the help. You are awesome!

[Simon André]

Oh.. you did all the work here :)

Happy coding !