autocomplete en liste

**phico04** · 28/04/2013, 11h37

Bonjour,

Je crée un module de facturation. Après l'encodage de la référence du client, j'encode les articles commandés.

Pour ce faire, j'utilise l'évènement jQuery Autocomplete qui, via un module PHP, m'affiche la référence, le libellé et le prix du produits.

Cela fonctionne pour la première référence mais pour les autres, l'évènement ne fonctionne plus.

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
 
  <title>Demo</title>
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/minified/jquery-ui.min.css" type="text/css" /> 
</head>
<body> 
 
<?PHP
include ("./include/mes_fonctions.php"); 
open_db();
 
if ( !isset($_PUT['no_cli']) )
    {
    $no_cli='';
    $nom='';
    $prenom='';
    }
?>
 
    <form action='' method='put'>
        <p><label>Client :</label><input type='text' name='numero' id='cherche'></input>
        <label>Nom :</label><input type='text' id='nom' name='nom' ></input>
        <label>Prénom :</label><input type='text' id='prenom' name='prenom' ></input></p>
        <?PHP
        for ($i=0;$i < 10;$i++)
        {
        ?>
        <p><label>Référence :</label><input type='text' name='reference[]' id='produit'</input>
        <label>Libellé :</label><input type='text' id='prod_libelle' name='libelle[]' ></input>
        <label>Prix :</label><input type='text' id='prod_prix' name='prix[]' ></input></p>
        <?PHP
        }
        ?>
 
 
    </form>
 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script>    
<script type="text/javascript">
$(function() {
dataType: 'json';
 
    //autocomplete
    $("#cherche").autocomplete({
        source: "getautocomplete.php",
        minLength: 3,
 
        select : function(event, ui)
        { 
        $('#cherche').val( ui.item.value ),
        $('#nom').val( ui.item.nom ),
        $('#prenom').val( ui.item.prenom );
 
        }
    });                
 
    $("#produit").autocomplete({
        source: "rech_produits.php",
        minLength: 3,
 
        select : function(event, ui)
        { 
        $('#produit').val( ui.item.value ),
        $('#prod_libelle').val( ui.item.libelle ),
        $('#prod_prix').val( ui.item.prix );
 
        }
    });
});
</script>
</body>
</html>

Quelqu'un saurait-il m'indiquer d'où peut venir le problème ?

Merci d'avance pour votre aide.

**undead001** · 29/04/2013, 14h21

Bonjour, si tu souhaite faire fonctionner ton code sur plusieur champs, tu dois utiliser les class et non les id, et remplacer tes "$" par ".". Id c'est unique donc ça prend le premier.

Essaye ce code

Code html :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
 
  <title>Demo</title>
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/minified/jquery-ui.min.css" type="text/css" /> 
</head>
<body> 
 
<?PHP
include ("./include/mes_fonctions.php"); 
open_db();
 
if ( !isset($_PUT['no_cli']) )
    {
    $no_cli='';
    $nom='';
    $prenom='';
    }
?>
 
    <form action='' method='put'>
        <p><label>Client :</label><input type='text' name='numero' class='cherche'></input>
        <label>Nom :</label><input type='text' class='nom' name='nom' ></input>
        <label>Prénom :</label><input type='text' class='prenom' name='prenom' ></input></p>
        <?PHP
        for ($i=0;$i < 10;$i++)
        {
        ?>
        <p><label>Référence :</label><input type='text' name='reference[]' class='produit'</input>
        <label>Libellé :</label><input type='text' class='prod_libelle' name='libelle[]' ></input>
        <label>Prix :</label><input type='text' class='prod_prix' name='prix[]' ></input></p>
        <?PHP
        }
        ?>
 
 
    </form>
 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script>    
<script type="text/javascript">
$(function() {
dataType: 'json';
 
    //autocomplete
    $(".cherche").autocomplete({
        source: "getautocomplete.php",
        minLength: 3,
 
        select : function(event, ui)
        { 
        $('.cherche').val( ui.item.value ),
        $('.nom').val( ui.item.nom ),
        $('.prenom').val( ui.item.prenom );
 
        }
    });                
 
    $(".produit").autocomplete({
        source: "rech_produits.php",
        minLength: 3,
 
        select : function(event, ui)
        { 
        $('.produit').val( ui.item.value ),
        $('.prod_libelle').val( ui.item.libelle ),
        $('.prod_prix').val( ui.item.prix );
 
        }
    });
});
</script>
</body>
</html>

**phico04** · 29/04/2013, 21h04

Merci pour ta réponse undead001.

Lorsque je remplace id par class et adapte le script, la référence sélectionnée s'affiche bien mais pas le libellé ni le prix. Et ainsi de suite pour les références suivantes. Une idée ?

voici le code adapté :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
 
  <title>Demo</title>
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/minified/jquery-ui.min.css" type="text/css" /> 
</head>
<body> 
 
<?PHP
include ("./include/mes_fonctions.php"); 
open_db();
 
if ( !isset($_PUT['no_cli']) )
	{
	$no_cli='';
	$nom='';
	$prenom='';
	}
 
 
?>
 
	<form action='' method='put'>
		<p><label>Client :</label><input type='text' name='numero' id='cherche'></input>
		<label>Nom :</label><input type='text' id='nom' name='nom' ></input>
		<label>Prénom :</label><input type='text' id='prenom' name='prenom' ></input></p>
		<?PHP
		for ($i=0;$i < 10;$i++)
		{
		?>
		<p><label>Référence :</label><input type='text' name='reference[]' class='produit'</input>
		<label>Libellé :</label><input type='text' class='prod_libelle' name='libelle[]' ></input>
		<label>Prix :</label><input type='text' class='prod_prix' name='prix[]' ></input></p>
		<?PHP
		}
		?>
 
 
	</form>
 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script>	
<script type="text/javascript">
$(function() {
dataType: 'json';
 
	//autocomplete
	$("#cherche").autocomplete({
		source: "getautocomplete.php",
		minLength: 3,
 
		select : function(event, ui)
		{ 
        $('#cherche').val( ui.item.value ),
		$('#nom').val( ui.item.nom ),
		$('#prenom').val( ui.item.prenom );
 
		}
	});				
 
	$(".produit").autocomplete({
		source: "rech_produits.php",
		minLength: 3,
 
		select : function(event, ui)
		{ 
        $('#produit').val( ui.item.value ),
		$('#prod_libelle').val( ui.item.libelle ),
		$('#prod_prix').val( ui.item.prix );
 
		}
	});
});
</script>
</body>
</html>

**undead001** · 02/05/2013, 12h31

Désolé j'ai essayé de résoudre ton problème, mais là je ne vois pas comment associer le autocomplete avec les cellules associés.
Ce que j'aurai fais, c'est autant d'autocomplete que de lignes... (TRES SALE!!!)

Mais le sujet m'interesse alors je le fais remonter

UP

**phico04** · 02/05/2013, 16h14

Peut-être une piste.

J'ai trouvé un post similaire apparament résolu mais le résultat est toujours identique lorsque j'essaie de l'appliquer.

http://www.sitepoint.com/forums/show...-identical-IDs

**Bovino** · 03/05/2013, 12h45

Répété je ne sais combien de fois : un id doit être unique dans la page !

**phico04** · 03/05/2013, 15h10

Merci pour ta réponse Bovino mais c'est ce que je fais dans la boucle de commande. id est bien remplacé par class. A la sortie de l'autocomplete, il m'affiche bien la référence du produit mais il me recopie le libellé et le prix dans toutes les lignes

Voici mon code actuel :

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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
 
  <title>Demo</title>
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/minified/jquery-ui.min.css" type="text/css" /> 
</head>
<body> 
 
<?PHP
include ("./include/mes_fonctions.php"); 
open_db();
 
if ( !isset($_PUT['no_cli']) )
	{
	$no_cli='';
	$nom='';
	$prenom='';
	$tot_lg='0';
	}
 
 
?>
 
	<form action='' method='post'>
		<p><label>Client :</label><input type='text' name='numero' id='cherche'></input>
		<label>Nom :</label><input type='text' id='nom' name='nom' ></input>
		<label>Prénom :</label><input type='text' id='prenom' name='prenom' ></input></p>
 
		<?PHP
		for ($i=0 ; $i < 5 ; $i++)
			{
		?>
			<p>
			<label>Référence :</label><input type='text' name='reference[]' class='produit' ></input>
			<label>Libellé :</label><input type='text'  name='libelle[]' class='libelle' ></input>
			<label>Prix :</label><input type='text' class='prix' name='prix[]' ></input>
			<label>Qté :</label><input type='text' class='qte' name='qte[]' onkeyup = "javascript:calcul('tot_lg');"></input>
			<label>Total :</label><input type='text' class='tot_lg' name='tot_lg[]'  value="<?PHP echo $tot_lg ?>" readonly></input>
			</p>
		<?PHP
			}
		?>
 
		<p>
		<label>Total commande :</label><input type='text' name='tot_cmd' id='tot_cmd' readonly></input>
		</p>
 
	</form>
 
 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.min.js"></script>	
 
 
 
 
<script type="text/javascript">
$(function() {
dataType: 'json';
 
	//autocomplete
	$("#cherche").autocomplete({
		source: "getautocomplete.php",
		minLength: 3,
 
		select : function(event, ui)
		{ 
        $('#cherche').val( ui.item.value ),
		$('#nom').val( ui.item.nom ),
		$('#prenom').val( ui.item.prenom );
 
		}
	});	
	});
</script>
 
<script type="text/javascript">
$(function() {
 
dataType: 'json';	
	$(".produit").autocomplete({
		source: "rech_produits.php",
		minLength: 3,
 
		select : function(event, ui)
		{ 
 
		$('.libelle').val( ui.item.libelle ),
		$('.prix').val( ui.item.prix );
 
		}
 
	});
 
	});
 
 
 
</script>
 
 
<script type="text/javascript">
function calcul()
{
/* La quantité est celle tapée dans le formulaire */
var quantite = document.getElementById("qte").value;
var prix = document.getElementById("prix").value;
 
 
/* Calcul du total  et affichage */
var total = parseFloat(quantite) * parseFloat(prix);
document.getElementById('tot_lg').value = total.toFixed(2);
 
var total_commande = document.getElementById('tot_cmd').value + parseFloat(total);
document.getElementById('tot_cmd').value = total.toFixed(2);
 
}
</script>
</body>
</html>

**Bovino** · 03/05/2013, 15h22

C'est normal :

Code :

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

1
2
$('.libelle').val( ui.item.libelle ),
$('.prix').val( ui.item.prix );

En dehors de l'erreur de syntaxe (la virgule de la première ligne), tu demandes bien d'affecter la valeur à tous les éléments ayant la classe libelle puis prix...

**phico04** · 03/05/2013, 15h52

alors là je vais avoir besoin de ton savoir pour me sortir de là

**Bovino** · 03/05/2013, 16h00

Commence par respecter Les règles incontournables d'utilisation de ce forum en postant le code HTML généré et non le PHP inutile avec JavaScript.

Sinon, l'idée c'est de lier d'une façon quelconque chaque élément correspondant à un même ensemble et de n'affecter que ceux qui correspondent. L'utilisation des attributs data-* peut être une bonne piste.

autocomplete en liste

jQuery

Discussions similaires

Partager

Partager