Autocomplétion qui disparait

Version imprimable

Bonjour tout le monde :)
Bon, j'espère qu'on me prendra pas trop pour un imbécile pour ce post...
J'essaie d'appliquer bêtement cette autocomplétion : Custom Data
Ca marche "à peu près". Quand je clique sur le champ, ça affiche la liste entière des clients disponibles. Mais dés que je tape une lettre, la liste des propositions disparait...
Je viens de galérer des heures. Et pas moyen de trouver une solution. Si quelqu'un peut m'aider, vraiment, merci à lui (ou à elle).

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
<html>
	<head>
		<title>Calendrier par Semaine - Semaine</title>
		<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
		<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
		<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
		<script type="text/javascript">
			$(function() {
				var clients = [ 
					{ nom: "DUPONT",   prenom: "Pierre",    telephone: "0611223344"},
					{ nom: "DURANT",  prenom: "Paul", telephone: "0655667788"},
					{ nom: "MARTIN", prenom: "Jacques",  telephone: "069900112233"}
				];
				$( "#client-nom" ).autocomplete({
					minLength: 0,
					source: clients,
					focus: function( event, ui ) {
						$( "#client-nom" ).val( ui.item.nom );
						return false;
					},
					select: function( event, ui ) {
						$( "#client-nom" ).val( ui.item.nom );
						$( "#client-prenom" ).val( ui.item.prenom );
						$( "#client-telephone" ).val( ui.item.telephone );
 
						return false;
					}
				})
				.data( "autocomplete" )._renderItem = function( ul, item ) {
					return $( "<li>" )
						.data( "item.autocomplete", item )
						.append( "<a>" + item.nom + " " + item.prenom + "<br />" + item.telephone + "</a>" )
						.appendTo( ul );
				};
			});
		</script>
	</head>
	<body>
		<div align="center">
			<form action="actions.php" method="post">
				<table border="1">
					<tr>
 
						<td align="right">Nom :</td>
						<td align="left">
							<input id="client-nom" />
						</td>
					</tr>
					<tr>
						<td align="right">Pr&eacute;nom :</td>
						<td align="left"><input id="client-prenom" type="text" maxlength="255" size="30" /></td>
					</tr>
					<tr>
						<td align="right">T&eacute;l&eacute;phone :</td>
						<td align="left"><input id="client-telephone" type="text" maxlength="10" size="10" /></td>
					</tr>
					<tr>
						<td colspan="2" align="center"><input type="submit" value="Ajouter" /></td>
					</tr>
				</table>
				<input type="hidden" name="action" value="Ajouter_Reservation" />
			</form>
		</div><br />
	</body>
</html>

29/10/2012, 12h38
danielhagnoul

Bonjour

Citation:

"Ca marche "à peu près". Quand je clique sur le champ, ça affiche la liste entière des clients disponibles."

Vous avez de la chance, à l'ouverture de la page dans Firefox, lorsque je clique sur le champ la liste ne s'affiche pas !

J'ai testé les versions 1.9.0 et 1.9.1, il y a bien un problème !

La méthode préconisée dans la démonstration (taper "d" ou "m" ou la flèche vers le bas) n'est pas fiable.

J'ai testé plusieurs idées, rien ne marche dans 100 % des cas.

Si l'option minLength est égale à 0 ou 1, lorsque je clique dans l'input et que j'appuie une seule fois sur la barre d'espace, le menu de sélection s'ouvre. Lorsque je veux modifier la sélection précédente, je dois d'abord effacer le contenu avant de taper un espace.
29/10/2012, 18h31
Z3c33

Hummm... Ok.

Je n'arrive pas à comprendre pourquoi l'exemple sur le site de jqueryui.com fonctionne bien, et que le mien rate comme ça...

Connaitriez-vous un autre exemple ou une autre méthode sur laquelle je pourrais m'appuyer pour contourner ce problème ?

En tout cas, merci de votre réponse.

Brice

Bonsoir

J'ai trouvé ! Il faut respecter le format d'"array" recommandé, voir les commentaires du code.

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
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/overcast/jquery-ui.css">
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/lib/jPicker/css/jPicker.dvjh-1.1.6.min.css">
	<style>
		/* TEST */
 
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<h2>Titre 2</h2>
	<section class="conteneur">
 
<input id="nom" />
<p id="description"></p>
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2012-10-29T19:43:03.236+01:00" pubdate>2012-10-29T19:43:03.236+01:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
	<script src="http://danielhagnoul.developpez.com/lib/raphael-min.js"></script>
	<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
	<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
	<script src="http://danielhagnoul.developpez.com/lib/jPicker/jpicker-1.1.6.min.js"></script>
	<script charset="utf-8" src="http://danielhagnoul.developpez.com/lib/dvjh/base.js"></script>
	<script>	
		"use strict";
 
		$(function(){
 
        	/*
				source, voir : http://api.jqueryui.com/autocomplete/
 
				An array can be used for local data.
 
				There are two supported formats:
					An array of strings: [ "Choice1", "Choice2" ]
					An array of objects with label and value properties: [ { label: "Choice1", value: "value1" }, ... ]
 
					The label property is displayed in the suggestion menu.
					The value will be inserted into the input element when a user selects an item
			*/
 
	        var clients = [
	            {
	                label : "DUPONT",
	                value : "DUPONT Pierre, téléphone: 0611223344"
	            },
	            {
	                label : "DURANT",
	                value : "DURANT Paul, téléphone: 0655667788"
	            },
	            {
	                label : "MARTIN",
	                value : "MARTIN Jacques, téléphone: 069900112233"
	            }
	        ];
 
	        $( "#nom" )
		        .autocomplete({
		            minLength: 0,
		            source: clients,
		            focus: function( event, ui ) {
		                $( "#nom" ).val( ui.item.label );
 
		                return false;
		            },
		            select: function( event, ui ) {
		                $( "#nom" ).val( ui.item.label );
		                $( "#description" ).html( ui.item.value );
 
		                return false;
		            }
		        })
		        .data( "autocomplete" )._renderItem = function( ul, item ) {
		            return $( "<li>" )
		                .data( "item.autocomplete", item )
		                .append( "<a>" + item.label + "</a>" )
		                .appendTo( ul );
		        };
 
		});
 
		$(window).load(function(){
 
		});
	</script>
</body>  
</html>

30/10/2012, 16h31
Z3c33

Yes!
Tu m'enlèves un gros poids là ! Vraiment, merci, j'aurais pas trouvé tout seul en fait :)

A noter : on peut tout de même rajouter des champs dans le tableau (du genre, prenom, nom, telephone) en plus du label et de la value. Ca peut aider.

Encore merci !
Brice