Symfony UX-autocomplete ne fonctionne pas

Petit nouveau ! | 2 Messages

28 oct. 2022, 08:51

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.

ynx
Eléphant du PHP | 494 Messages

28 oct. 2022, 13:45

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

Petit nouveau ! | 2 Messages

29 oct. 2022, 10:37

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...