Page 1 sur 1

Symfony UX-autocomplete ne fonctionne pas

Posté : 28 oct. 2022, 08:51
par darquita
Bonjour,

L'autocomplete ne fonctionne pas chez moi. J'ai tenté plein de choses mais rien n'y fait. C'est problématique vu le nombre de villes...
Probablement une erreur de débutant ou/et une histoire de config.
J'ai testé même les exemples basiques des vidéos youtube, ça ne fonctionne pas...

- la solution la plus basique:
->add('city', EntityType::class,[
                'class'=>City::class,
                'label'=>'Ville',
                'placeholder'=>'Selectionnez votre ville',
                'autocomplete'=>true
            ])
(en tentant aussi 'true et "true")

-en passant par un autocompletefield:
->add('city', CityAutocompleteField::class)
+
#[AsEntityAutocompleteField]
class CityAutocompleteField extends AbstractType
{
    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults([
            'class'=>City::class,
            'choice_label'=>'name',
            'placeholder'=>'Saisissez',

            'query_builder' => function(CityRepository $cityRepository) {
                return $cityRepository->createQueryBuilder('city');
            },
            //'security' => 'ROLE_SOMETHING',
        ]);
    }

    public function getParent(): string
    {
        return ParentEntityAutocompleteType::class;
    }
}
composer.json
{
    "type": "project",
    "license": "proprietary",
    "minimum-stability": "stable",
    "prefer-stable": true,
    "require": {
        "php": ">=8.0",
        "ext-ctype": "*",
        "ext-iconv": "*",
        "beberlei/doctrineextensions": "^1.3",
        "doctrine/annotations": "^1.0",
        "doctrine/doctrine-bundle": "^2.7",
        "doctrine/doctrine-migrations-bundle": "^3.2",
        "doctrine/orm": "^2.13",
        "knplabs/knp-paginator-bundle": "^5.9",
        "phpdocumentor/reflection-docblock": "^5.3",
        "phpstan/phpdoc-parser": "^1.8",
        "sensio/framework-extra-bundle": "^6.1",
        "symfony/apache-pack": "^1.0",
        "symfony/asset": "5.4.*",
        "symfony/console": "5.4.*",
        "symfony/doctrine-messenger": "5.4.*",
        "symfony/dotenv": "5.4.*",
        "symfony/expression-language": "5.4.*",
        "symfony/flex": "^1.17|^2",
        "symfony/form": "5.4.*",
        "symfony/framework-bundle": "5.4.*",
        "symfony/http-client": "5.4.*",
        "symfony/intl": "5.4.*",
        "symfony/mailer": "5.4.*",
        "symfony/mime": "5.4.*",
        "symfony/monolog-bundle": "^3.0",
        "symfony/notifier": "5.4.*",
        "symfony/process": "5.4.*",
        "symfony/property-access": "5.4.*",
        "symfony/property-info": "5.4.*",
        "symfony/proxy-manager-bridge": "5.4.*",
        "symfony/runtime": "5.4.*",
        "symfony/security-bundle": "5.4.*",
        "symfony/serializer": "5.4.*",
        "symfony/string": "5.4.*",
        "symfony/translation": "5.4.*",
        "symfony/twig-bundle": "5.4.*",
        "symfony/validator": "5.4.*",
        "symfony/web-link": "5.4.*",
        "symfony/yaml": "5.4.*",
        "twig/extra-bundle": "^2.12|^3.0",
        "twig/twig": "^2.12|^3.0"
    },
    "require-dev": {
        "doctrine/doctrine-fixtures-bundle": "^3.4",
        "fakerphp/faker": "^1.20",
        "phpunit/phpunit": "^9.5",
        "symfony/browser-kit": "5.4.*",
        "symfony/css-selector": "5.4.*",
        "symfony/debug-bundle": "5.4.*",
        "symfony/maker-bundle": "^1.0",
        "symfony/phpunit-bridge": "^6.1",
        "symfony/stopwatch": "5.4.*",
        "symfony/ux-autocomplete": "^2.4",
        "symfony/web-profiler-bundle": "5.4.*",
        "symfony/webpack-encore-bundle": "^1.15"
    },
    "config": {
        "allow-plugins": {
            "composer/package-versions-deprecated": true,
            "symfony/flex": true,
            "symfony/runtime": true
        },
        "optimize-autoloader": true,
        "preferred-install": {
            "*": "dist"
        },
        "sort-packages": true
    },
    "autoload": {
        "psr-4": {
            "App\\": "src/"
        }
    },
    "autoload-dev": {
        "psr-4": {
            "App\\Tests\\": "tests/"
        }
    },
    "replace": {
        "symfony/polyfill-ctype": "*",
        "symfony/polyfill-iconv": "*",
        "symfony/polyfill-php72": "*"
    },
    "scripts": {
        "auto-scripts": {
            "cache:clear": "symfony-cmd",
            "assets:install %PUBLIC_DIR%": "symfony-cmd"
        },
        "post-install-cmd": [
            "@auto-scripts"
        ],
        "post-update-cmd": [
            "@auto-scripts"
        ]
    },
    "conflict": {
        "symfony/symfony": "*"
    },
    "extra": {
        "symfony": {
            "allow-contrib": false,
            "require": "5.4.*"
        }
    }
}
package.json
{
    "devDependencies": {
        "@babel/core": "^7.17.0",
        "@babel/preset-env": "^7.16.0",
        "@hotwired/stimulus": "^3.0.0",
        "@symfony/stimulus-bridge": "^3.2.0",
        "@symfony/ux-autocomplete": "file:vendor/symfony/ux-autocomplete/assets",
        "@symfony/webpack-encore": "^4.0.0",
        "core-js": "^3.23.0",
        "regenerator-runtime": "^0.13.9",
        "tom-select": "^2.0.1",
        "webpack": "^5.74.0",
        "webpack-cli": "^4.10.0",
        "webpack-notifier": "^1.15.0"
    },
    "license": "UNLICENSED",
    "private": true,
    "scripts": {
        "dev-server": "encore dev-server",
        "dev": "encore dev",
        "watch": "encore dev --watch",
        "build": "encore production --progress"
    }
}
Merci d'avance à celui qui voudra bien y jeter un coup d'oeil.

Re: Symfony UX-autocomplete ne fonctionne pas

Posté : 28 oct. 2022, 13:45
par ynx
Bonjour,

Quel est le code html générée pour le formulaire ?
Pas d'erreur js dans la console du navigateur ?
Symfony UX est bien configuré dans le fichier de config de webpack (enableStimulusBridge) ?
Le paquet symfony/ux-autocomplete devrait être une dépendance de production et pas une dépendance de développement dans composer.
Essaye de reprendre la doc officielle plutôt que des vidéos youtube :
https://symfony.com/bundles/ux-autocomp ... index.html
https://symfony.com/doc/current/frontend/ux.html

Re: Symfony UX-autocomplete ne fonctionne pas

Posté : 29 oct. 2022, 10:37
par darquita
Bonjour,
Merci pour ta réponse!

En utilisant
->add('city',CityAutocompleteField::class)
:
<select id="looking_for_city" name="looking_for[city]" required="required" data-controller="symfony--ux-autocomplete--autocomplete" data-symfony--ux-autocomplete--autocomplete-no-results-found-text-value="No results found" data-symfony--ux-autocomplete--autocomplete-no-more-results-text-value="No more results"><option value="" selected="selected">Selectionnez votre ville</option><option value="25000">Boudes(63)</option><option value="25001">La Bourboule(63)</option>...<option value="35853">Île de Clipperton(989)</option></select>
(j'ai juste le placeholder qui s'affiche dans les formulaires de création, et placeholder plus valeur de base dans les formulaires de modification, donc je ne peux rien choisir, ni modifier, mais à part ça le formulaire fonctionne normalement)

En utilisant
->add('city', EntityType::class,[
                'class'=>City::class,
                'label'=>'Ville',
                'placeholder'=>'Selectionnez votre ville',
                'autocomplete'=>true
            ])
<select id="looking_for_city" name="looking_for[city]" required="required" data-controller="symfony--ux-autocomplete--autocomplete" data-symfony--ux-autocomplete--autocomplete-no-results-found-text-value="No results found" data-symfony--ux-autocomplete--autocomplete-no-more-results-text-value="No more results"><option value="" selected="selected">Selectionnez votre ville</option><option value="25000">Boudes(63)</option><option value="25001">La Bourboule(63)</option>...<option value="35853">Île de Clipperton(989)</option></select>
(Je peux sélectionner toutes les options et le choix est pris en compte mais l'autocomplete est inexistant)

Pas d'erreur js dans la console du navigateur.

J'ai bien ça dans mon webpack.config.js:
// enables the Symfony UX Stimulus bridge (used in assets/bootstrap.js)
    .enableStimulusBridge('./assets/controllers.json')

ux-autocomplete viens d'être mis dans la prod.

J'ai fait un composer recipes:update pour mettre à jour mon webpack-encore-bundle.

Et j'ai toujours le même problème...