Materialize autocomplète dropdown

Bonjour,

Je suis entrain de faire un formulaire qui demande nom prenom.... code postal et ville.

1/ Donc lorsqu'on commence a entrer un code postal une liste déroulante d'autocompletion, nous avons une liste avec des éventuels code postaux qui pourraient convenir au client. Et elle s'affiche EN DESSOUS l'input text.

2/ Ensuite j'aimerais que lorsqu'on clique sur la case de saisie de notre ville pour saisir une valeur, une liste apparait avec toute les villes du code postal entré précédemment (je tien a préciser que tout ce qui est ajax qui trie les villes et code postaux sont déjà fais et tester).

Résultat jusqu'a maintenant :

1/ Ca fonctionne mais si l'aide s'ouvre et que notre saisie de code postaux est a la fin de notre écran et que nous avbons donc pas de place visible en dessous notre input alors la liste déroulante va se faite vers le haut en partant du bas de mon input (en gros si je tape "9" 90000 va supperposé ma case de saisie qui contient "9" et ensuite les valeur monte au dessus ma case de saisie ex: 90001,90002 ect.
Ce qui rend donc la saisie caché par notre liste donc on ne sait pas ce que l'on écrit.

2/ J'ai bien les villes en fonction de mon code postal seulement si je n'entre pas un caractère dans la case ville le menu ne s'ouvre pas (menu déroulant d'autocompletion) enfaite j'aimerais que lorsqu'on a un code postal des que l'on cloque sur notre case de saisie de ville notre menu s'ouvre en dessous contenant toute les villes de notre code postal pour nous en proposé et ensuite lorsque nous entrons une valeur alors les ville s'actualise (sa je l'ai deja fais ca fonction). J'ai essayer de faire des onClick des focus ect et d'ouvrir le menu mais sans succe.

document.getElementById("vil").addEventListener("focus", afficherList);
function afficherList(){
    console.log("test");
   let instance = M.Dropdown.getInstance($('#vil'));
   let instanceCP = M.Dropdown.getInstance($('#cp'));
   let instance2 = M.Autocomplete.getInstance($('#vil'));
   //console.log(instance.open);
   M.Dropdown.getInstance($('#vil')).dropdown('open')
   console.log(instanceCP.options.coverTrigger = false);
   console.log(instanceCP.options.alignment = "left");
   console.log(instance.options.onOpenStart = 3);
   //console.log(instanceCP.isScrollable = true);
   //console.log(instanceCP.isOpen = true);
   //console.log(instanceCP.options.autoFocus = true);
   //console.log(instance.options.coverTrigger = true);
   //console.log(instance);
   console.log(instanceCP);
}```