Débutant. UI Autocomplete liste existante mais invisible
Bonjour à tous
je suis débutant en css, javascript et jquery.
Je sollicite votre aide car j'ai adapter un code pour faire une auto complementation sur un input.
La liste provient d'une bdd mysql, elle est presente dans la div mais je n'arrive pas à la voir.
http://img175.imageshack.us/img175/3...tocomplete.jpg
J'ai essayé de changer le css dans tous les sens et là je suis bloqué.
voici mon 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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>autocomplete</title>
<script type="text/javascript" src="jquery-1.2.1.pack.js"></script>
<script type="text/javascript">
function lookup(inputString) {
if(inputString.length == 0) { // si le champs txte est vide
$('#suggestions').hide(); // on cache les suggestions
} else { // sinon
$.post("ajax.php", {queryString: ""+inputString+""}, function(data){ // on envoit la valeur du champ texte dans la variable post queryString au fichier ajax.php
if(data.length >0) {
$('#suggestions').show(); // si il y a un retour, on affiche la liste
$('#AutoSuggestionsList').html(data); // et on remplit la liste des données
}
});
}
}
function fill(thisValue) { // remplir le champ texte si une suggestion est cliquée
$('#inputString').val(thisValue);
setTimeout("$('#suggestions').hide();", 200);
}
$(document).ready( function () {
$("input#inputString").keyup( function() { // si on presse une touche du clavier en étant dans le champ texte qui a pour id inputString
lookup($(this).val())
});
$("input#inputString").blur( function() { // si le champs texte perd le focus
fill()
});
});
</script>
<style type="text/css">
/* mise en forme de la page */
a.lien { color:#FF00FF; font-weight:bold; font-size:1.2em; text-decoration:underline; }
a.lien:hover { color:#FF00FF; }
p{margin-top:20px; font-size:1.2em; }
body {
font-family: Helvetica;
font-size: 11px;
color: #000;
}
h3 {
margin: 0px;
padding: 0px;
}
/****
STYLES DE LA BOITE DE SUGGESTION À PERSONNALISER
****/
.suggestionsBox {
position: relative;
left: 30px;
margin: 10px 0px 0px 0px;
width: 200px;
background-color: #FFFFFF;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border: 2px solid #000;
color: #fff;
font-size: 11px;
}
.suggestionList {
margin: 3px;
padding: 3px;
}
.suggestionList li {
margin: 0px 0px 3px 0px;
padding: 3px;
cursor: pointer;
list-style:none;
font-size: 11px;
}
.suggestionList li:hover {
background-color: #FF8C00;
color:#000;
}
</style>
</head>
<body>
<body>
<div>
<form>
<div>
Rechercher un pays :
<br />
<input type="text" size="30" value="" id="inputString" /><!-- champ texte à analyser pour les suggestions -->
</div>
<div class="suggestionsBox" id="suggestions" style="display: none;"> <!-- bloc contenant les eventuelles suggestions -->
<img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" /> <!-- image de la fleche vers le haut -->
<div class="suggestionList" id="AutoSuggestionsList"><!-- liste contenant les suggestions -->
</div>
</div>
</div>
</body>
</html> |
et le code php qui va chercher les données :
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
| <?php
include ("connexion2.php");
//on se connecte à la base de donnée
$dbconnect = mysql_connect($hote,$user,$pass) or die ("erreur de connexion");
//on selectionne votre base
mysql_select_db($base,$dbconnect) or die ("erreur de connexion base");
if(isset($_POST['queryString'])) {
$queryString=$_POST['queryString'];
if(strlen($queryString) >0) {
$result = mysql_query("SELECT auteur FROM paris WHERE auteur LIKE '$queryString%' LIMIT 10");
if($result) {
while ($aut = mysql_fetch_object($result)) {
echo '<li onClick="fill(\''.$aut->auteur.'\');">'.$pays->auteur.'</li>';
}
} else {
echo 'Il y a une probleme avec la requete sql.';
}
}
} else {
echo 'Il ne devrait pas avoir un accès direct à ce script !!!';
}
?> |
merci pour votre aide
