Autocomplete via fichier csv

**NoSmoking** · 27/06/2012, 18h42

Comment est-ce que le js va savoir que le téléphone se trouve à la 6eme position dans le JSON ?

c'est toi qui lui dit via la structure JSON que tu auras mis en place.

http://t-templier.developpez.com/tut...cript-poo1/#L1

nota:

10101012;Dupond;Jean Claude;jc@test.fr;ESSENCE;0380808082; Bt 122

n'a pas la structure d'un objet JSon, mais d'une chaine que tu peux "splitter" pour la récupérer sous forme d'Array

Code :

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

1
2
3
var chaine = '10101012;Dupond;Jean Claude;jc@test.fr;ESSENCE;0380808082; Bt 122';
var tableau = chaine.split(';');
alert( tableau[5]); // téléphone

**maxredphenix** · 28/06/2012, 07h19

Bonjour,

Merci pour ta réponse, je vais faire un tour du côté de ton lien pour savoir comment on défini la position de chaque élément. Par contre on est obligé de convertir en JSON, il y a pas moyen de travailler directement avec le csv?

Merci à tous les 2

**maxredphenix** · 28/06/2012, 14h08

Je suis en train de regarder ton lien ainsi que d'autres tuto pour savoir comment je peux définir cette structure.

Par contre je viens d'apprendre que je peux avoir le fichier d'origine en xml au lieu de csv, est-ce que travailler avec du xml serait plus simple?
Voila à quoi pourrait ressembler la structure du xml!

Code xml :

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

1
2
3
4
5
6
7
8
9
<annuaire>
	<numero id= « 0380234141 »>
		<nom>Dupond</nom>
		<prenom>Gérard</prenom>
		<batiment>102</batiment>
		<local>1</local>
		<service>Achat</achat>
	</numero>
<annuaire>

Merci

maxredphenix

**NoSmoking** · 28/06/2012, 18h39

La structure XML semble plus indiquée pour la maintenance du fichier, tu peux également mettre cela en BdD et créer un objet JSon coté serveur.

L'utilisation d'un Array peut être simplifié par l'utilisation de "constante"(*)

Code :

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

1
2
3
4
5
6
7
var NUM_TELEPHONE = 5,
    NOM = 1,
    PRENOM = 2;
var chaine = '10101012;Dupond;Jean Claude;jc@test.fr;ESSENCE;0380808082; Bt 122';
var tableau = chaine.split(';');
var sTmp = tableau[NOM] +' ' +tableau[PRENOM] +' est joignable au ' +tableau[NUM_TELEPHONE];
alert( sTmp);

Après c'est une affaire de goût.

(*)const n'est pas reconnu par certains navigateurs, il faut encore attendre.

**maxredphenix** · 28/06/2012, 21h42

Bonsoir,

Merci pour ta réponse. Tu ferais quoi? xml ou autres?

Je vais voir comment faire alors pour faire ceci avec un fichier xml, vu que la structure est déjà défini à l'intérieur du fichier c'est sûr ça sera plus simple. J'ai juste à parcourir les noeuds et à rechercher l’élément désiré.

J'ai plus qu'a apprendre à utiliser le xml

maxredphenix

**headmax** · 28/06/2012, 21h48

Voilà pour un exemple concret et complet désolé pour le temps de réponse, pour hier je n'étais pas chez moi.

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
 
<?php
function convCsvToArrayToJson(){
        $datas = array();
        $col = array("id","nom","prenom","mail","message","tel","bt");
        $handle = fopen("test.csv", "r");
 
        while (($data = fgetcsv($handle)) !== FALSE) {
                $datas[] = $data;
        }
        return json_encode($datas);
}
 
?>
<html>
<head>
<script type="text/javascript">
var tab;
//Fonction de parcours du Tableau JSON (annuaire) et alimentation des champs
function objToString (obj) {
    var str = '';
    for (var p in obj) {
        if (obj.hasOwnProperty(p)) {
            str += obj[p] + '\n';
        }
    }
    return str;
};
 
function findClient(idClient){
	var clients = <?php echo convCsvToArrayToJson("test.csv"); ?>;
	alert(idClient);
 
		for(var i=0;i<clients.length;i++){	
 
			tab = objToString(clients[i]).split(';');
 
			if(tab[0] == idClient){
				document.getElementById("nom").value=tab[1];
				document.getElementById("prenom").value=tab[2];
				document.getElementById("mail").value=tab[3];
				document.getElementById("message").value=tab[4];
				document.getElementById("tel").value=tab[5];
				document.getElementById("bt").value=tab[6];
			}
		}
};
</script>
</head>
<body>
<form action="#">
IDS : <input type="text" value="" id="ids" onblur="findClient(this.value);" /><br>
NOM : <input type="text" value="" id="nom" /><br>
PRENOM : <input type="text" value="" id="prenom" /><br>
MAIL : <input type="text" value="" id="mail" /><br>
MESSAGE : <input type="text" value="" id="message" /><br>
TEL : <input type="text" value="" id="tel" /><br>
BT : <input type="text" value="" id="bt" /><br>
</form>
</body>
</html>

Donc comment il fonctionne?
Tu met l'url de ton CSV, ensuite, tu change l'id du CHAMPS IDS et voili voilou.
Bonne soirée, ça serait sympa cette fois ci de mettre Résolu

.
Pour le xml oui s'est très intéressant, plus rapide c'est clair, mais s'est trop tard

, prochaine fois.
Merci à smoking pour le pseudo json généré par PHP, il s'agit bien d'un object, c'est pour ça d'ailleurs que je le converti en objToString afin de récupérer le string et ensuite le splité pour qu'il devienne un simple tableau array.
Bonne soirée A+

**maxredphenix** · 28/06/2012, 22h20

Super merci,

Tu n'as pas à t'excuser c'est déjà génial que des gens m'aident donc je vais pas me plaindre. Je viens de tester et c'est ok, tout fonctionne niquel. Je l'ai modifié afin de faire une recherche à partir du numéro de téléphone avec mon formulaire et c'est super tout fonctionne très bien:

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
<?php
        function getNewValues($n)
        {return($n * $n * $n);}
        function convCsvToArrayToJson(){
                $datas = array();
                $col = array("id","nom","prenom","mail","service","tel","bt");
                $handle = fopen("annuaire.csv", "r");
         
                while (($data = fgetcsv($handle)) !== FALSE) {
                        $datas[] = $data;
                }
                return json_encode($datas);
        }
?>
<html>
	<head>
		<script type="text/javascript">
			var tab;
			//Fonction de parcours du Tableau JSON (annuaire) et alimentation des champs
			function objToString (obj) {
				var str = '';
				for (var p in obj) {
					if (obj.hasOwnProperty(p)) {
						str += obj[p] + '\n';
					}
				}
				return str;
			};
 
			function findClient(idClient){
				var clients = <?php echo convCsvToArrayToJson("annuaire.csv"); ?>;
				alert(idClient);
 
					for(var i=0;i<clients.length;i++){	
 
						tab = objToString(clients[i]).split(';');
 
						if(tab[5] == idClient){
							document.getElementById("nom").value=tab[1];
							document.getElementById("prenom").value=tab[2];
							document.getElementById("mail").value=tab[3];
							document.getElementById("service").value=tab[4];
							document.getElementById("tel").value=tab[5];
							document.getElementById("bt").value=tab[6];
						}
					}
			};
		</script>
	</head>
	<body>
		<form action="#">
			<span class="num_appelant">
				<label for="num_appelant">N° de l'appelant: </label>
				<!-- Le onchange sert à faire un appel à la fonction findClient pour remplir divers champs via l'annuaire. 
						à chaque modification du champ la fonction ira chercher sa correspondance dans le fichier annuaire-->
				<input type="text" name="num_appelant" value="" id="tel" placeholder="ex: 34100" onblur="findClient(this.value);"/>
			</span>
			<br />
			<span>
				<label for="nom_demandeur">Demandeur: </label>
				<input type="text" name="nom_demandeur" value="" id="nom" maxlength="30" />
			</span>
			<br />
			<span>
				<label for="service">Service: </label>
				<input type="text" name="service" value="" id="service" maxlength="50" />
			</span>
			<br />
			<span>
				<label for="batiment">Bâtiment: </label>
				<input type="text" name="batiment" value="" id="bt" maxlength="10" />
			</span>
			<br />
			<span>
				<label for="local">Local: </label>
				<input type="text" name="local" value="" id="local" />
			</span>
		</form>
	</body>
</html>

Je vais quand même par curiosité regarder plus tard comment faire pour un fonctionnement avec un fichier xml.

Je vous remercie tous les 2 pour votre aide et le temps que vous m'avez consacrés.

Passez une bonne soirée.

Maxredphenix

Autocomplete via fichier csv

JavaScript

Discussions similaires

Partager

Partager