Symfony Profiler

<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" href="{{asset('assets/css/style.css')}}">
<link rel="stylesheet" href="{{asset('assets/css/responsive.css')}}">
<link rel="stylesheet" href="{{asset('assets/css/user-panel.css')}}">
<link rel="stylesheet" href="{{asset('assets/css/user-panel-responsive.css')}}">
<link rel="stylesheet" href="{{asset('assets/css/bootstrap.min.css')}}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="{{asset('assets/css/owl.carousel.min.css')}}">
<link rel="stylesheet" href="{{asset('assets/fontawesome/css/all.min.css')}}">
<link rel="shortcut icon" href="{{asset('assets/images/favicon.ico')}}">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<title>Modixom</title>
</head>
<style>
#headerpart .btn-alert {
background-color: #B0DB82!important;
}
#headerpart .btn-alert i {
color: #00B065!important;
}
.select2-container--open {
z-index: 9999; /* Ajoutez un z-index élevé pour le dropdown */
}
</style>
<body>

{% if app.user %}
<header class="user-panel-header-area" id="header{{ app.user.type }}">
{% else %}
<header class="user-panel-header-area" id="header{{ app.session.get('type') }}">
{% endif %}
<div class="user-panel-header-bottom">
<div class="container">
<div class="row">
<div class="col-xl-2 col-lg-2 col-md-0 col-sm-0 col-0 d-lg-block d-none">
{% if app.user %}
{% if app.user.type == 'pro' %}
<a href="{{ path('professionnels') }}" data-abc="true" class="nav-item nav-logo">
<img id="change-logo" src="{{ asset('assets/images/logo.png') }}" style="width: 60px; margin: 0 1.3em;" alt="">
</a>
{% else %}
<a href="{{ path('app_default') }}" data-abc="true" class="nav-item nav-logo">
<img id="change-logo" src="{{ asset('assets/images/logo.png') }}" style="width: 60px; margin: 0 1.3em;" alt="">
</a>
{% endif %}
{% else %}
<a href="{{ path('app_default') }}" data-abc="true" class="nav-item nav-logo">
<img id="change-logo" src="{{ asset('assets/images/logo.png') }}" style="width: 60px; margin: 0 1.3em;" alt="">
</a>
{% endif %}
<span style="font-size: 23px">MODIXOM</span>
</div>
<div class="col-xl-8 col-lg-8 col-md-10 col-sm-10 col-10">
<div class="user-header-bottom-main clearfix">
<div class="user-header-bottom-left">
<nav class="navbar navbar-expand-lg navbar-light d-flex">
{% if app.user %}

<a href="" data-bs-toggle="modal" data-bs-target="#alerte" class="d-flex">
<div class="btn-alert" style="background-color:#ADB9CA;">
<i class="fas fa-bell" style="color:#d82e9f"></i>
</div>

</a>
<a href="{{path('favoris')}}" class="d-flex">
<div class="btn-alert" style="background-color:#ADB9CA;">
<i class="fas fa-heart" style="color:#d82e9f"></i>
</div>

</a>
<a href="{{path('annonces')}}" class="d-flex">
<div class="btn-alert" style="background-color:#ADB9CA;">
<i class="fas fa-th-large" style="color: #d82e9f"></i>
</div>

</a>
{% endif %}

{% if app.session.get('type') == 'pro' %}
<li class="nav-item">
{% if app.user %}
<a style="text-decoration: none; color:black; margin-left:2em;" class="nav-link modal-title" href="{{path('app_annonces_new')}}"><i class="fas fa-regular fa-plus"></i> Créer une annonce</a>
{% else %}
<a style="text-decoration: none; color:black; margin-left:2em;" class="nav-link modal-title" data-bs-toggle="modal" data-bs-target="#connexion-modal" ><i class="fas fa-regular fa-plus"></i> Créer une annonce</a>
{% endif %}
</li>
{% endif %}
</nav>
</div>
</div>
</div>
{% if app.user %}
<div class="col-xl-2 col-lg-2 col-md-2 col-sm-2 col-2 d-flex justify-content-end align-items-center ">
<div class="user-panel-header-top-right clearfix">
<div class="user-panel-profile">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false" style="color:transparent;"><span class="profils-icon" id="dropdownIcon" style="background-color: transparent;"><i class="fas fa-bars"></i></span></a>
<ul class="dropdown-menu" style=" margin-top: 25px ;" aria-labelledby="navbarDropdown">
{% if app.user.type == 'pro' %}
<li>
<a class="dropdown-item" href="{{path('notesEnseignes')}}"> Notes obtenues</a>
</li>
<hr>
<li><a class="dropdown-item" href="{{path('mesAnnonces',{'type':'encours'})}}">Mes annonces</a></li>
<li><a class="dropdown-item" href="{{path('mesAnnonces',{'type':'terminee'})}}">Annonces terminées</a></li>
<li><a class="dropdown-item" href="{{path('achatCredit')}}" style="color:red">Acheter du crédit</a></li>
{# data-bs-toggle="modal" data-bs-target="#achatModal" #}
<li><a class="dropdown-item" href="{{path('achatFacture')}}" style="color:red"></i> Factures</a></li>
<hr>
{% endif %}
<li><a href="{{path('profil')}}" class="dropdown-item">Profil</a></li>
<li><a href="{{path('app_logout')}}" class="dropdown-item user-logout">Déconnexion</a></li>
<li><a href="" data-toggle="modal" data-target="#modaldelete" class="dropdown-item user-logout">Supprimer mon compte</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
{% else %}
<div class="col-xl-2 col-lg-2 col-md-2 col-sm-2 col-2 d-flex justify-content-end align-items-center">
<a class="nav-link my-auto" href="login.php" data-bs-toggle="modal" data-bs-target="#connexion-modal" style="font-weight:bold !important; color: black; font-size: 23px; white-space: nowrap;">Se connecter</a>
</div>

{% endif %}
</div>
</div>
</div>

<div class="modal fade" id="modaldelete" tabindex="-1" role="dialog" aria-labelledby="modaldeleteLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Supprimer mon compte !</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<p>VOUS ALLEZ COMMENCER LE PROCESSUS DE SUPPRESSION DE VOTRE COMPTE</p>
<p>Vous êtes sur le point de nous demander de fermer de manière définitive votre compte et de supprimer vos données. Une fois votre compte fermé, tous les services auxquels vous accédez par le biais de votre compte ne seront plus disponibles.</p>
<div class="confirm-row d-flex">
<input type="checkbox" name="confirmation" id="confirmation">
<label for="confirmation">OUI, JE SOUHAITE FERMER DEFINITIVEMENT MON COMPTE ET SUPPRIMER MES DONNÉES</label>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" style="color:red">Supprimer</button>
<button type="button" class="btn btn-primary text-light">Annuler</button>
</div>
</div>
</div>
</div>

<div class="modal fade" id="alerte" tabindex="-1" aria-labelledby="alerteModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content" style="height: 41em;">
<div class="modal-header">
<h5 class="modal-title" id="alerteModalLabel">Mes alertes</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body" style="margin:0;padding:10px;">
<div class="row">
<form action="{{ path('addAlertes') }}" method="post" class="d-flex flex-column">
<label for="" class="form-label" style="margin:0;padding:10px;">Créer une alerte par mots-clés :</label>
<div class="d-flex">
<input type="text" class="form-control" name="texte" style="height:2.5em;" placeholder="Nouvelle Alerte">
</div>
</div>
<div id="alerte-categorie" style="margin-top:30px;">
<div>
<div class="mb-3">
<label for="categorie" class="form-label">Créer une alerte par catégorie :</label>
<div class="d-flex">
<select class="form-select" id="categorie" name="categorie" style="height:2.5em;">
<option value="0">-- Choisir catégorie --</option>
{% for categorie in categories %}
<option value="{{ categorie.id }}">{{ categorie.libelle }}</option>
{% endfor %}
</select>
</div>
</div>
</div>
</div>
<div id="alerte-perimetre" style="margin-top:40px;">
<div>
<div class="mb-3">
<label for="perimetre" class="form-label">Créer une alerte par localisation :</label>
</div>
<div class="mb-3">
<label for="ville" class="form-label">Ville :</label>
{% if app.user %}
{% if app.user.villes %}
<input type="hidden" id="villeSelectModal" value="{{ app.user.villes.id }}" data-city-name="{{ app.user.villes.VilleNom }}" data-city-postal-code="{{ app.user.villes.VilleCodePostal }}">
{% else %}
<input type="hidden" id="villeSelectModal" value="">
{% endif %}
{% else %}
<input type="hidden" id="villeSelectModal" value="">
{% endif %}
<select class="js-data-example-ajax form-control" id="villeSelectDropdown" name="ville" style="width:100%"></select>
</div>
<div class="mb-3">
<label for="rayon" class="form-label">Rayon de recherche :</label>
<input type="number" name="rayon" class="form-control" id="rayon" min="0">
</div>
<div class="mb-3 d-flex justify-content-end">
<button class="btn btn-primary" style="background-color: #ADB9CA!important; border: solid 1px #d82e9f!important; margin-top:5px;">Ajouter</button>
</div>
</form>
</div>
</div>
<h3>Votre liste d'alertes</h3>
<div class="alerte-table">
<div class="container">
{% for alerte in alertes %}
<div class="row pb-3">
<button type="button" class="btn btn-primary d-flex" style="background-color: #ADB9CA!important; border: solid 1px #d82e9f!important;">
<span class="mr-auto">{{ alerte.texte }}</span>
<span class="ml-auto delete-alert" data-id="{{ alerte.id }}" aria-hidden="true">×</span>
</button>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>


{# <div class="modal fade" id="achatModal" tabindex="-1" aria-labelledby="achatModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="achatModalLabel">Acheter du crédit</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div role="tabpanel" class="tab-pane fade in active">
<div class="theme-box-center">
<div class="row">
<div class="col-xl-10 col-lg-10 col-md-10 col-sm-10 col-12">
<div class="theme-input-box">
<label>Combien de crédit souhaitez-vous ? </label>
<input class="theme-input" type="number" name="" placeholder="10">
</div>
</div>
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-12">
<div class="fix-price-value">
<h3 class="theme-title" style="color: #F6249D;">Nombre de crédit restant : 12</h3>
<p class="theme-description">1 crédit = 1 euro </p>
<p class="theme-description">Minimum 10 crédits.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
<button type="button" class="btn theme-btn-pro">Acheter</button>
</div>
</div>
</div>
</div> #}
</header>
{% block body %}{% endblock %}

<div class="modal fade" id="connexion-modal" tabindex="-1" aria-labelledby="connexion-modal-Label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content" style="z-index: 100;">
<div class="modal-header">
<h5 class="modal-title mx-auto w-100 fs-3 text-center" id="connexion-modal-Label">Connexion</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form class="row g-3 needs-validation" method="POST" action="{{ path('custom_login') }}">
<div class="mb-3">
<label for="Email-connexion" class="form-label">Email</label>
<input type="email" class="form-control" id="Email-connexion" name="email" aria-describedby="emailHelp">
</div>
<div class="mb-3">
<label for="Password-connexion" class="form-label">Mot de passe</label>
<div class="input-group">
<input type="password" class="form-control" id="exampleInputPassword1" name="password" aria-describedby="forgot-password">
<button class="btn btn-outline-secondary" type="button" id="togglePassword1">
<i class="fas fa-eye"></i>
</button>
</div>
<div id="forgot-password" class="form-text">
<a href="forgot-Password.php" style="color: #F6249D;">Mot de passe oublié ?</a>
</div>
</div>
<div class="mb-3 ">
<p>Pas encore membre ? <a class="login-text" href="#" data-bs-toggle="modal" data-bs-target="#exampleModal" style="color : black; text-decoration: underline !important;">S'inscrire</a></p>
</div>
<button type="submit" class="btn btn-primary">Connexion</button>
</form>
</div>
</div>
</div>
</div>


<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content" style="z-index: 100;">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Sélectionnez votre statut</h5>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body d-flex justify-content-center align-items-center flex-column text-center">
<a href="{{path('inscription',{'type':'part'})}}" class="btnModem" style="width:60%">INSCRIPTION PARTICULIER</a>
<a href="{{path('inscription',{'type':'pro'})}}" class="btnMod" style="width:60%; margin-top:20px; white-space: nowrap;">INSCRIPTION PROFESSIONNEL</a>
</div>
</div>
</div>
</div>


<footer class="footer-main">
<div class="footer-top">
<div class="container">
<div class="row">
<!-- <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12">
<div class="footer-widget">
<a href="index.html"><img src="assets/images/logo.png" style="width: 100px;" alt=""></a>
<p class="theme-description">Modixom vous permettra de trouver en un seul click les meilleurs promotions. </p>
<div class="footer-links clearfix">
<div class="footer-icon-box">
<a href="" title="Facebook" style="color: #3b5998;">
<i class="fab fa-facebook-f"></i>
</a>
</div>
<div class="footer-icon-box">
<a href="" title="Twitter" style="color: #00acee;">
<i class="fab fa-twitter"></i>
</a>
</div>
<div class="footer-icon-box">
<a href="" title="Linkedin" style="color: #0e76a8;">
<i class="fab fa-linkedin-in"></i>
</a>
</div>
</div>
</div>
</div> -->
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 text-center">
<div class="footer-widget">
<h3 class="theme-title {% if app.session.get('type') == 'part' %}green{% else %}blue{% endif %}">DÉCOUVRIR MODIXOM</h3>
<div class="footer-menu-services">
<ul class="menu-service-menu" style="margin-left: -30px">
{% if app.session.get('type') == 'pro' %}
<li><a href="{{ path('professionnels', {}, '#propos') }}">A Propos</a></li>
{% else %}
<li><a href="{{ path('app_default', {}, '#propos') }}">A Propos</a></li>
{% endif %}
<li><a href="recommander_commercant.php">Recommander un commerçant</a></li>
<li><a href="browse-particulier-no-logged.php">Annonces</a></li>
</ul>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12">
<div class="footer-widget">
<h3 class="theme-title {% if app.session.get('type') == 'part' %}green{% else %}blue{% endif %}">MENTIONS LÉGALES</h3>
<div class="footer-menu-services">
<ul class="menu-service-menu" style="margin-left: -30px">
<li><a href="{{path('app_mention')}}">Mentions légales</a></li>
<li><a href="{{path('app_cookie')}}">Gestion des cookies</a></li>
<li><a href="{{path('app_protection')}}">Politique de protection des données</a></li>
<!-- <li><a href="contact.php">Conditions de vente</a></li>
<li><a href="contact.php">RGPD</a></li> -->
</ul>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12">
<div class="footer-widget">
<h3 class="theme-title {% if app.session.get('type') == 'part' %}green{% else %}blue{% endif %}">AIDE</h3>
<div class="footer-menu-services">
<ul class="menu-service-menu" style="margin-left: -30px">
{% if app.user %}
<li><a href="{{path('contact1')}}" >Nous contacter</a></li>
{% else %}
<li><a data-bs-toggle="modal" data-bs-target="#connexion-modal">Nous contacter</a></li>
{% endif %}
<li><a href="faq-particulier.php">FAQ</a></li>
</ul>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 ">
<div class="footer-widget">
<h3 class="theme-title {% if app.session.get('type') == 'part' %}green{% else %}blue{% endif %}">APPLICATION</h3>
<div class="footer-menu-services">
<div class="row"><br>

<div class="col-md-12 col-12 pb-3">
<a href="https://www.apple.com/fr/app-store/" target="_blank" class="market-btn apple-btn" role="button">
<span class="market-button-subtitle">Télécharger sur</span>
<span class="market-button-title">App Store</span>
</a>
</div>

<div class="col-md-12 col-12 ">
<a href="https://play.google.com/store/games?gl=FR&utm_source=emea_Med&utm_medium=hasem&utm_content=Oct2020&utm_campaign=Evergreen&pcampaignid=MKT-EDR-emea-fr-1001280-Med-hasem-py-Evergreen-Oct2020-Text_Search_BKWS%7CONSEM_kwid_43700008792247580&gclid=CjwKCAiAl9efBhAkEiwA4Toril0SpGeAFHdzwhXUd_zX25ptzJLjDqUqg26pTEyl6Apf3UA1SsLrhhoCuAcQAvD_BwE&gclsrc=aw.ds&pli=1" target="_blank" class="market-btn google-btn" role="button">
<span class="market-button-subtitle">Télécharger sur</span>
<span class="market-button-title">Google Play</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<div class="copyright-text text-right" style="margin-right: 100px">
<p><a href="index.php">© 2023 Modixom</p>
</div>
</div>
</div>
</footer>


<div class="back-top-top" id="page-up">
<a href=""><i class="fas fa-arrow-up"></i>Haut</a>
</div>



<div class="theme-preloader">
<span><img src="{{asset('assets/images/logo.png')}}" alt=""></span>
</div>



<script src="{{asset('assets/js/jquery.min.js')}}"></script>
<script src="{{asset('assets/js/popper.min.js')}}"></script>
<script src="{{asset('assets/js/bootstrap.min.js')}}"></script>
<script src="{{asset('assets/js/owl.carousel.min.js')}}"></script>
<script type="text/javascript" src="{{asset('assets/js/jquery.cookie.min.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="{{asset('assets/js/custom.js')}}"></script>
<script src="{{asset('assets/js/ck-editor.js')}}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
$("#pro-button").click(function() {
$("#pro-options").removeClass("d-none");
});
</script>
<script>
$(document).ready(function() {
$('.js-data-example-ajax').select2({
placeholder: 'Choisir une ville ou un code postal',
language: {
inputTooShort: function() {
return "Saisir minimum 3 caractères";
},
searching: function() {
return "Recherche en cours...";
},
noResults: function() {
return "Aucun résultat trouvé";
}
},
minimumInputLength: 3,
ajax: {
url: '/api/villes', // Utilisez l'URL de votre nouvelle API
dataType: 'json',
delay: 250,
data: function(params) {
return {
q: params.term // search term
};
},
processResults: function(data) {
return {
results: data.results
};
},
cache: true
},
templateResult: function(city) {
if (city.loading) return city.text;
return $('<span>' + city.text + '</span>');
},
templateSelection: function(city) {
return city.text || city.id;
}
});
// Sélectionner par défaut une ville spécifique si une valeur est définie
var defaultCityId = $('#villesSelect').val();
var defaultCityName = $('#villesSelect').data('city-name');
var defaultCityPostalCode = $('#villesSelect').data('city-postal-code');
if (defaultCityId && defaultCityName) {
var defaultOption = new Option(defaultCityName + ' (' + defaultCityPostalCode + ')', defaultCityId, true, true);
$('.js-data-example-ajax').append(defaultOption).trigger('change');
}
});
</script>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
document.querySelectorAll('.delete-alert').forEach(button => {
button.addEventListener('click', function () {
const alertId = this.getAttribute('data-id');
fetch(`/delete-alert/${alertId}`, {
method: 'DELETE',
headers: {
'X-Requested-With': 'XMLHttpRequest',
'Content-Type': 'application/json'
}
})
.then(response => {
if (response.ok) {
location.reload();
} else {
alert('Une erreur s\'est produite lors de la suppression de l\'alerte.');
}
});
});
});
});
document.getElementById('périmètre').addEventListener('input', function () {
if (this.value < 0) {
this.value = 0;
}
});
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('togglePassword1').addEventListener('click', function() {
var passwordField = document.getElementById('exampleInputPassword1');
var type = passwordField.getAttribute('type') === 'password' ? 'text' : 'password';
passwordField.setAttribute('type', type);
this.querySelector('i').classList.toggle('fa-eye-slash');
});
});
</script>
<script>
$(document).ready(function() {
// Initialize Select2 on the dropdown
$('#villeSelectDropdown').select2({
placeholder: 'Choisir une ville ou un code postal',
language: {
inputTooShort: function() {
return "Saisir minimum 3 caractères";
},
searching: function() {
return "Recherche en cours...";
},
noResults: function() {
return "Aucun résultat trouvé";
}
},
minimumInputLength: 3,
ajax: {
url: '/api/villes',
dataType: 'json',
delay: 250,
data: function(params) {
return {
q: params.term // Search term
};
},
processResults: function(data) {
return {
results: data.results
};
},
cache: true
},
templateResult: function(city) {
if (city.loading) return city.text;
return $('<span>' + city.text + '</span>');
},
templateSelection: function(city) {
return city.text || city.id;
}
}).on('select2:open', function() {
// Focus on the search input when the dropdown opens
const searchField = document.querySelector('.select2-search__field');
searchField.focus();
// Attach a keyup event to the document to capture key presses
$(document).on('keyup.select2', function(e) {
const key = e.key;
if (key === "Backspace") {
searchField.value = searchField.value.slice(0, -1);
} else if (key.length === 1 || !isNaN(key)) {
searchField.value += key;
}
searchField.dispatchEvent(new Event('input', {
bubbles: true
}));
});
// Remove the event listener when the dropdown is closed
$('#villeSelectDropdown').on('select2:close', function() {
$(document).off('keyup.select2');
});
});
// Select a specific city by default if a value is set
var defaultCityId = $('#villeSelectModal').val();
var defaultCityName = $('#villeSelectModal').data('city-name');
var defaultCityPostalCode = $('#villeSelectModal').data('city-postal-code');
if (defaultCityId && defaultCityName) {
var defaultOption = new Option(defaultCityName + ' (' + defaultCityPostalCode + ')', defaultCityId, true, true);
$('#villeSelectDropdown').append(defaultOption).trigger('change');
}
});
</script>

</body>
</html>

templates/base2.html.twig line 1