Discussion :

[BidulleTruc]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[BidulleTruc]

Bon,

en retravaillant le code, je réussis à récupérer ce qui est renvoyé par la page php et à l'afficher dans le champ Ville.
Le problème est maintenant que l'ensemble de la réponse figure sur une seule ligne et que je ne réussis pas à découper les éléments en ligne et en colonne...


Ce qui est renvoyé par la réponse xmlhttp.responseText:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
AULNOY LEZ VALENCIENNES|59032
FAMARS|59221
VALENCIENNES|59606

Voici le code de l'autocomplete :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
var SourceVille = xmlhttp.responseText;
alert(SourceVille);
 
document.getElementById("citySecureLogin").focus();
 
function formatItem(row) {
	//return row[0] + " (<strong>id: " + row[1] + "</strong>)";
	return row[0];
	}
 
function formatResult(row) {
	return row[0].replace(/(<.+?>)/gi, '');
	}
 
$("#citySecureLogin").autocomplete({
	source: [SourceVille],
	minLength:0,
	minChars:0,
	delay: 0,
	cellSeparator: '|',
	lineSeparator: '\n',
	formatItem: formatItem,
	formatResult: formatResult
	});

et voici ce qui m'est proposé dans le champ par l'autocomplete :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

AULNOY LEZ VALENCIENNES|59032 FAMARS|59221 VALENCIENNES|59606

comment puis-je séparer les informations?