Comment autoriser la saisie dans une liste déroulante

**Kyti** · 21/10/2008, 17h27

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 :

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

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

**blueice** · 21/10/2008, 18h11

Non...

**Kyti** · 21/10/2008, 19h57

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

**Bovino** · 21/10/2008, 20h37

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.

**Kyti** · 21/10/2008, 20h43

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

**Kyti** · 21/10/2008, 20h47

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

**SpaceFrog** · 21/10/2008, 20h52

Une petit recherche t'aurait mené par là
http://www.developpez.net/forums/d49...src-combo-box/

**Bovino** · 21/10/2008, 20h58

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

**Kyti** · 21/10/2008, 21h14

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

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

**amezghal** · 21/10/2008, 22h24

Salut,
voici un code qui fonctionne

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 :

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
<!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>

**Kyti** · 22/10/2008, 09h54

Merci

**Kyti** · 22/10/2008, 10h23

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

**Kyti** · 22/10/2008, 10h24

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.

**amezghal** · 27/10/2008, 16h44

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é)

Comment autoriser la saisie dans une liste déroulante

JavaScript

Discussions similaires

Partager

Partager