Afficher le résultat d'une auto complétion dans un tableau
Bonsoir à tous,
J'ai un formulaire qui me liste des contacts. J'utilise l'autocomplétation. En gros, lorsque je tape par exemple : Mo, le champ Texte m'affiche tous les noms etprénom (dans une infobulle) qui contiennent Mo pour faciliter la saisie.
Jusque là, je n'ai pas de problème par requête SQL s'effectue bien...
Le souci est que je voudrai en dessous de mon formulaire, un tableau qui s'affiche avec plus de détail : Nom, prénom, adresse mail, etc... en fonction de ma saisie dans mon champs texte.
Je pense que mon souci vient du deuxième fichier : rpc.php
Si quelqu'un pouvait me donner un tuyau... Merci par avance.
Fichier : index.php
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
| <!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>Rerchercher un contact</title>
<script type="text/javascript" src="jquery-1.2.1.pack.js"></script>
<script type="text/javascript">
function lookup(inputString) {
if(inputString.length == 0) {
// Hide the suggestion box.
$('#suggestions').hide();
} else {
$.post("rpc.php", {queryString: ""+inputString+""}, function(data){
if(data.length >0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}
});
}
} // lookup
function fill(thisValue) {
$('#inputString').val(thisValue);
setTimeout("$('#suggestions').hide();", 200);
}
</script>
<style type="text/css">
body {
font-family: Helvetica;
font-size: 11px;
color: #000;
}
h3 {
margin: 0px;
padding: 0px;
}
.suggestionsBox {
position: relative;
left: 30px;
margin: 10px 0px 0px 0px;
width: 200px;
background-color: #212427;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border: 2px solid #000;
color: #fff;
}
.suggestionList {
margin: 0px;
padding: 0px;
}
.suggestionList li {
margin: 0px 0px 3px 0px;
padding: 3px;
cursor: pointer;
}
.suggestionList li:hover {
background-color: #659CD8;
}
</style>
</head>
<body>
<div>
<form id="search">
<div>
<label for="search-text">Rechercher un contact</label>
<br />
<input type="text" size="30" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
</div>
<div class="suggestionsBox" id="suggestions" style="display: none;">
<img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
<div class="suggestionList" id="autoSuggestionsList">
</div>
</div>
</form>
</div>
</body>
</html> |
Fichier : rpc.php
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
| <?php
header('Content-Type: text/html; charset=ISO-8859-1');
$db = new mysqli('localhost', 'root' ,'', 'bdcontact');
if(!$db) {
echo 'Erreur : impossible de se connecter à la base';
} else {
if(isset($_POST['queryString'])) {
$queryString = $db->real_escape_string($_POST['queryString']);
if(strlen($queryString) >0) {
$query = $db->query("SELECT nom,prenom FROM tadherents WHERE CONCAT(nom,' ',PRENOM) LIKE '%$queryString%' LIMIT 10");
if($query) {
while ($result = $query ->fetch_object()) {
echo '<li onClick="fill(\''.$result->nom." ".$result->prenom.'\');">'.$result->nom.' '.$result->prenom.'</li>';
}
} else {
echo 'problème de requête';
}
} else {
}
} else {
echo 'erreur';
}
}
?> |
