Débutant. UI Autocomplete liste existante mais invisible

**zorgglub** · 15/07/2010, 13h48

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.

J'ai essayé de changer le css dans tous les sens et là je suis bloqué.

voici mon code :

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
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 -->
					&nbsp;
				</div>
			</div>
</div>
 
</body>
</html>

et le code php qui va chercher les données :

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

**danielhagnoul** · 16/07/2010, 01h56

Bonsoir.

La version actuelle est jQuery 1.4.2 : http://www.developpez.net/forums/d89...y/#post5081860

Pour les widgets jQuery UI 1.8.2 : http://jqueryui.com/download

Documentation UI Autocomplete : http://jqueryui.com/demos/autocomplete/

Langage serveur et base de données : ce n'est pas le bon forum.

Débutant. UI Autocomplete liste existante mais invisible

jQuery

Vue hybride

Discussions similaires

Partager

Partager