autocomplete en liste

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

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, 13h21

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, 20h04

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, 11h31

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, 15h14

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, 11h45

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

autocomplete en liste

jQuery

Vue hybride

Discussions similaires

Partager

Partager