J'ai un formulaire dans un modal comme ci dessous

<?php
require_once ("./conexion.php");
$findsalarie=mysqli_query($con,"select * from salarie order by nomSalarie;");
?>
<div id="addProductModal" class="modal fade">
		<div class="modal-dialog">
			<div class="modal-content">
				<form name="add_product" id="add_product">
					<div class="modal-header">						
						<h4 class="modal-title">Ajouter un Client</h4>
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					</div>
					<div class="modal-body">					
						<div class="form-group">
							<label>Numero Client</label>
							<input type="text" name="id"  id="id" class="form-control" required>
						</div>
						<div class="form-group">
							<label>Nom</label>
							<input type="text" name="nom" id="nom" class="form-control" required>
						</div>	
						<div class="form-group">
							<label>Adresse</label>
							<input type="text" name="name" id="name" class="form-control"required >
						</div>
						<div class="form-group">
							<label>Adresse 2</label>
							<input type="text" name="price" id="price" class="form-control">
						</div>	
						<div class="form-group">
							<label>Code Postal</label>
							<input name="cp" id="cp" type="text" placeholder="cp" class="form-control" required>
						</div>
						<div class="form-group">
							<label>Ville</label>

                            <input name="ville" id="ville" type="text" placeholder="ville" class="form-control" required>
						</div>
						
						<div class="form-group">
							<label>Createur de la fiche</label>
							<select name='salarie' class='form-control' id='salarie'  >
						
							<option>
							--Selectionner un salarié--
							</option>
							<?php	
								while($row = mysqli_fetch_array($findsalarie))	
								{
									$option=$row['nomSalarie'];
									$option2=$row['prenomSalarie'];
						?>
									<option  value="<?php echo $row['numSalarie']; ?>"> <?php echo $option,' ',$option2 ?></option>
						<?php
								}
						?>




							</select>
						</div>





					</div>
					<div class="modal-footer">
						<input type="button" class="btn btn-default" data-dismiss="modal" value="Annuler">
						<input type="submit" class="btn btn-success" value="Sauvegarder les données">
						
						<p align="center">
						Un numéro de tiroir sera indiqué 
						</p>
					</div>
				</form>
			</div>
		</div>
	</div>

Mais quand je rentre un code postal qui devrais m'indiquer les villes correspondante la liste déroulante s'affiche en arrière plan du modal je vous donne le script
En gros normalement (hors modal) si je tape 85800 dans le code postal il renvoi les villes associer dans un menu déroulant
mais là j’aperçois ce menu sur la page principal (ce qui est inutile vu que je veut qu'il s'affiche sous le input dans le modal...

<script>
$("#cp").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "https://api-adresse.data.gouv.fr/search/?postcode="+$("input[name='cp']").val(),
            data: { q: request.term },
            dataType: "json",
            success: function (data) {
                var postcodes = [];
                response($.map(data.features, function (item) {
                    // Ici on est obligé d'ajouter les cp dans un array pour ne pas avoir plusieurs fois le même
                    if ($.inArray(item.properties.postcode, postcodes) == -1) {
                        postcodes.push(item.properties.cities);

                        return { label: item.properties.postcode + " - " + item.properties.city, 
                                 city: item.properties.city,
                                 value: item.properties.postcode
                        };
                    }
                }));
            }
        });
    },
    // On remplit aussi la ville
    select: function(event, ui) {
        $('#ville').val(ui.item.city);
    }
});
$("#ville").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "https://api-adresse.data.gouv.fr/search/?city="+$("input[name='ville']").val(),
            data: { q: request.term },
            dataType: "json",
            success: function (data) {
                var cities = [];
                response($.map(data.features, function (item) {
                    // Ici on est obligé d'ajouter les villes dans un array pour ne pas avoir plusieurs fois la même
                    if ($.inArray(item.properties.postcode, cities) == -1) {
                        cities.push(item.properties.postcode);
                        return { label: item.properties.postcode + " - " + item.properties.city, 
                                 postcode: item.properties.postcode,
                                 value: item.properties.city
                        };
                    }
                }));
            }
        });
    },
    // On remplit aussi le cp
    select: function(event, ui) {
        $('#cp').val(ui.item.postcode);
    }
});

</script>

.pac-container {
z-index: 1051 !important;
}
je mets ca dans le css et ca marche