Ajax.autocompleter toute la page bouge

**akrobat** · 09/02/2010, 15h46

Bonjour à tous,

c'est mon premier post dans ce forum. J'ai mis en place une auto-complétion au niveau d'un <input type="text">, mais je rencontre un problème particulièrement énervant :

J'obtiens bien la liste des items. Mais quand je veux me déplacer dans la liste avec les touches FLECHE_BAS et FLECHE_HAUT, certes la sélection suit le mouvement, mais toute la page bouge également vers le haut ou vers le bas, en fonction de la touche enfoncée.

Exemple tout simple :

Fichier index.html

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
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Ajax AutoCompletion</title>
</script>
		<script type="text/javascript" src="javascript/prototype.js"></script>
		<script type="text/javascript" src="javascript/scriptaculous.js"></script>
		<link rel="stylesheet" type="text/css" href="style.css" />
	</head>
 
	<body>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br>
	Texte : <input type="text" id="test" name="test"/>
	<div id="sug" class="autocomplete"></div>
	<script language="javascript"> 
	new Ajax.Autocompleter(
    "test",  
    "sug",  
    "test.php");
	</script>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
	</body>
</html>

Les <br> sont nécessaires pour simuler le problème

test.php

Code :

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

1
2
3
4
 
<?php
echo("<ul><li class=\"selected\">Toto</li><li>Titi</li></ul>");
?>

style.css

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
 
#sug
{
	position: absolute;
}
.selected
{
	background: gray;
	color: white;
}
 
#sug ul
{
	margin: 0;	
	padding: 0;
	list-style-type: none;
	border: 1px solid gray;
}
 
#sug ul li
{
	list-style-type:none;
	cursor: pointer;
}

Pouvez-vous m'aider à restreindre l'action des touches FLECHE_HAUT et FLECHE_BAS ?

Merci d'avance

**akrobat** · 10/02/2010, 11h36

je viens de trouver une solution, je la partage donc avec vous :

http://www.gilluminate.com/2009/01/2...ng-arrow-keys/

Ajax.autocompleter toute la page bouge [script.aculo.us]

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager