Bonjour,
J'ai un soucis pour créer un champ de recherche avec un affichage de saisie automatique à partir d'une base de donnée.
J'ai essayé de nombreux codes et suivis des tuto trouvés sur le net mais ça n'a rien donné. J'ai choisi le plus clair d'entre eux à cette adresse: http://blog.arnaud-k.fr/... et je l'ai adapté.
Le problème est qu'il n'y a rien qui s'affiche à la saisie.
Pourriez vous me donner un coup de main svp?
Voici mon code test.php :
<body>
<script language="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 () { // lorsque la page est entierement chargée
$("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>
<div>
Rechercher un client :
<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>
</body>
</html>
et la page ajax.php :
<?php
$bdd_db ="blabla";
$link = mysql_connect("localhost", "login", "pass") or die("Impossible de se connecter : " . mysql_error());
mysql_select_db($bdd_db,$link);
// si une variable queryString a été posté
if(isset($_POST['queryString'])) {
// si la longueur du contenu de la variable est superieur à 0
if(strlen($queryString) >0) {
// requete sql à personnaliser pour correspondre à votre base de données
$result = mysql_query("SELECT value FROM client WHERE value LIKE '$queryString%' LIMIT 10");
if($result) {
// on parcourt les resultats
while ($test = mysql_fetch_object($result)) {
// on affiche les resultats dans un element de liste en ajoutant
// la fonction fill sur l'evenenement onClick
echo '<lionClick="fill(\''.$test->value.'\');">'.$test->value.'</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 beaucoup.
Configuration: Windows XP
Firefox 3.0.5
* Apache/2.2.11 (Win32) PHP/5.2.8
* Version du client MySQL: 5.0.51a
* Extension PHP: mysqli
phpMyAdmin
* Version: 3.1.1
Autocompletion ajax php
