Comment autoriser la saisie dans une liste déroulante

Version imprimable

Bonjour,

Est-il possible d'autoriser la saisie dans une liste déroulante ?
J'ai une liste dans laquelle je permets le choix d'une heure (heure et minutes), mais je n'arrive pas à autoriser la saisie pour éviter de devoir faire défiler cette liste.

voilà mon code
Code:

1 2 3 4 5 6 7 8 <select id="heureDebut" name="heureDebut" size="1" multiple> <option>07:00</option> <option>07:01</option> <option>07:02</option> <option>07:03</option> ... </select>
si je suis sur 07:00, y a t-il une solution pour que je puisse directement saisir 19:03 par exemple ?

De plus, j'ai mis multiple car je voulais que la liste ne se déroule pas, et qu'on voit les 2 petites flèches mais c'est pas super vu que je ne dois pas autoriser plusieurs valeurs...
Y a t-il une meilleure solution ?

Merci

21/10/2008, 18h11
blueice

Non...
21/10/2008, 19h57
Kyti

eh ben... on peut pas faire plus bref comme réponse... mais ça ne m'aide pas... j'ai déjà vu des listes où on pouvait saisir OU choisir, alors comment fait-on ?

par exemple ce que j'aimerais obtenir, c'est comme le choix des marges dans Word/Fichiers/Mise en page.
Merci
21/10/2008, 20h37
Bovino

Comme te l'a fait remarquer blueice, il n'est pas possible d'obtenir ce que tu souhaites avec les balises <option> qui n'acceptent que du texte comme contenu.
Ce que tu as pu voir est en général réalisé en javascript en simulant des champs de type option.
Je t'invite donc à te renseigner à ce sujet et à ne pas hésiter à reformuler ta demande si tu bloques dans le forum adéquat.
21/10/2008, 20h43
Kyti

Citation:

Envoyé par Bovino

Comme te l'a fait remarquer blueice, il n'est pas possible d'obtenir ce que tu souhaites avec les balises <option> qui n'acceptent que du texte comme contenu.
Ce que tu as pu voir est en général réalisé en javascript en simulant des champs de type option.
Je t'invite donc à te renseigner à ce sujet et à ne pas hésiter à reformuler ta demande si tu bloques dans le forum adéquat.

bon alors j'ai fait des recherches tout l'aprem mais sans mot clé, j'avoue ne pas comprendre et ne pas savoir quoi chercher.

ma liste actuelle est en fait remplie par une fonction javascript, ce que je n'ai pas jugé utile de préciser
21/10/2008, 20h47
Kyti

Comment faire une liste déroulante autorisant la saisie

Bonjour,

J'essaie de faire une liste déroulante dans laquelle on peut aussi saisir. On me parle de javascript qui simule les option mais je ne vois pas du tout comment on fait ça ?

Est-ce que quelqu'un peut m'en dire un peu plus ?

merci
21/10/2008, 20h52
SpaceFrog

Une petit recherche t'aurait mené par là
http://www.developpez.net/forums/d49...src-combo-box/
21/10/2008, 20h58
Bovino

Spaffy, en dehors d'être une référence, tu es aussi la mémoire vivante de ce forum !
21/10/2008, 21h14
Kyti

merci, ça a l'air d'etre ce dont j'ai besoin :D

j'avais fait uine recherche mais pas avec les bons mots clés.

Salut,
voici un code qui fonctionne :P
ps:
-j'utilise le framework mootools(tu le télécharges depuis mootools.net) [désolé depuis que j'ai découvert ce framework je peux plus faire du js natif]
-pour les touches numériques il ne faut pas utiliser ceux du pavé numérique.

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<meta name="author" content="" />
<script type="text/javascript" src="mootools.js"></script>
	<title>amezghal</title>
</head>
<body>
amez
<select id="select">
	<option value="20:15" class="opt">20:15</option>
	<option value="20:30" class="opt">20:30</option>
	<option value="20:45" class="opt">20:45</option>
</select>
abdel
<script type="text/javascript">
var str = ''
$('select').addEvents({
	'keydown':function(e){
		if(e.code==191){
			str += ':'	
		}else if(e.key.length == 1){
			str += e.key
		}
		move = true
		$$('.opt').each(function(item){
			if(move){
				if(item.get('value')==str){
					item.set('selected', 'selected')
					move = false
				}
			}
		})
	},
	'click':function(){
		str = ''
	}
})				
</script>
</body>
</html>

22/10/2008, 09h54
Kyti

Merci
22/10/2008, 10h23
Kyti

bon c'est pas exactement ce que je cherchais mais ça fera l'affaire...
par contre, il ne prend en compte que le premier chiffre, mais comme j'ai le choix entre 07, 08... 19, en fait il ne prend que 0 ou 1 donc ça ne m'avance pas beaucoup :(
22/10/2008, 10h24
Kyti

je viens de tester, en fait c'est pas ça que je voulais obtenir. On m'a conseillé mootools sur un autre forum, c'est pas non plus ça que je cherche mais c'est toujours mieux et ça fera l'affaire.
27/10/2008, 16h44
amezghal

salut,
il ne faut pas utilisé les boutons du pavé numérique ...
ajoutes un alert(e.code) apres le 'keydown':function(e){
tu verras que les touches du pavé numérique retournent autres valeurs, si tu veux tu peux créer un tableau qui contient les valeurs traduites (e.code vers chiffre approprié)