Jquery Autocomplete : affichage d'une liste de selection à partir du remplissage d'un autre champ

Bonjour à tous,

Franchement novice, je ne ne réussis pas à résoudre un problème qui va peut être vous sembler très simple.

A partir du champ code postal, je souhaite proposer une liste des villes correspondant à celui-ci et remplir un champ caché (code Insee) suite à la sélection de la ville.

Un javascript activé via un 'onkeyup' dans le champ code postal valide la longueur du code saisi.
Lorsque celui-ci fait 5 caractères, cela déclenche la recherche de ville.

J'effectue une requête via une page php qui me renvoie l'information de la façon suivante :

Code:

echo "$InseeVilleSep[1]|$InseeVilleSep[0]\n";

Si une seule réponse, je remplis le champ ville et champ Insee et donne le focus au champ Nom de voie.

Pour plusieurs réponses,je transfert le focus sur le champ ville et je souhaiterais affiché le $InseeVilleSep[1] dans le champ ville sous forme de liste déroulante.

voici le code actuel :
tout fonctionne jusqu'au focus du champ ville... après je ne réussis pas à afficher quoi que ce soit.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
function AutocompleteVille(){
	value_session_CleanAddress=1;
	String.prototype.trim = function()
		{
		return this.replace(/(?:^\s+|\s+$)/g, "");
		}
 
	var CPVal='';
 
	CPVal=document.getElementById("postcodeSecureLogin").value.trim();
 
	var Pays='1';
	var ValueWebmethod='WS_CleanAddress_CP';
 
	var A='create_account_speedform_fichiers/accesServiceCleanAddress_AutoSuggest_test4.php?Webmethod='+ValueWebmethod+'&session_CleanAddress='+value_session_CleanAddress+'&CP='+CPVal+'&Pays='+Pays;
	var url = A ;
 
	$().ready(function() {
		// Create xmlhttprequest object
		var xmlhttp = null;
		if (window.XMLHttpRequest) {
				xmlhttp = new XMLHttpRequest();
				//make sure that Browser supports overrideMimeType
				if ( typeof xmlhttp.overrideMimeType != 'undefined') { xmlhttp.overrideMimeType('text/xml'); }
			} else if (window.ActiveXObject) {
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			}  else {
				alert('Perhaps your browser does not support xmlhttprequests?');
			}
		// Create an HTTP GET request
		xmlhttp.open('GET', url, true);
 
 
 
		// Set the callback function
		xmlhttp.onreadystatechange = function() 
			{
			if (xmlhttp.readyState == 4) 
				{
					var valSplitFormatage = xmlhttp.responseText.split('\n');
					//var valSplitvalue = xmlhttp.responseText;
 
					if (valSplitFormatage.length==2) {
						var valSplitVilleInsee = valSplitFormatage[0].split('|');	
						CodeInsee=valSplitVilleInsee[1];
						Ville=valSplitVilleInsee[0];
 
						$('#citySecureLogin').val(Ville);
						$('#codeinsee').val(CodeInsee);
 
						document.getElementById("adressSecureLogin").focus();
 
					} else {
						var SourceVille='["';
 
						for (i=0; i<valSplitFormatage.length-1; i++){
							//alert("i:"+i+" et valSplitFormatage.length:"+valSplitFormatage.length);
							if (i==valSplitFormatage.length-2){
							SourceVille=SourceVille+valSplitFormatage[i];
							} else {
							SourceVille=SourceVille+valSplitFormatage[i]+'","';
							}
						}
						SourceVille=SourceVille+'"]';
 
						//alert(SourceVille);
 
						document.getElementById("citySecureLogin").focus();
 
						function log(event, data, formatted) {
							$("<li>").html( !data ? "No match!" : "Selected: " + formatted).appendTo("#result");
							}
 
 
						$("#citySecureLogin").autocomplete( {  
							source : SourceVille,
							width: 180,
							selectFirst: false,
							delay:0,
							minLength: 0, 
							close: function(event, ui) {
								if($(this).val()=="") $(this).val(SourceVille[0]);
							}
 
							});
 
						//affiche le result en bas de page
						$(":text, textarea").result(log).next().click(function() {
							$(this).prev().search();
							});
 
						$("#citySecureLogin").result(function(event, data, formatted) {
							if (data)
								$("#codeinsee").val(data[1]);
 
							});
						$("#citySecureLogin").flushCache();
					}
				}
			};
			// Make the actual request
			xmlhttp.send(null);
	});
}

merci de vos conseils