autocompletion avec jquery [Résolu]

[bob633]

Bonjour,

J'essaie depuis hier d'utiliser l'autocompletion de jquery, cependant j'ai un soucis.

En fait le script fonctionne presque bien, sauf qu'il se base toujours sur ma 1ere lettre que j'écris dans le champ texte. En gros un exemple :
Table A :
ID nom
1 Paris
2 Prague

Quand j'écris dans mon champ texte "P" il me liste bien les deux ville, cependant si je continue avec "Pa", il continue de m'afficher les deux, en gros il ne fait pas le tri sur la 2eme lettre.

Voici les fonctions dans le index.php :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type="text/javascript">
	function lookup(inputString) {
		if(inputString.length == 0) {
			// Hide the suggestion box.
			$('#suggestions').hide();
		} else {
			$.post("pages/Autocompletion.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>

Le script php appelé par la fonction js :

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
<?php
	$db = new mysqli('localhost', 'nom_user' ,'password', 'nom_table');
	if(!$db) {
		// Show error if we cannot connect.
		echo 'ERROR: Could not connect to the database.';
	} else {
 
		if(isset($_POST['queryString'])) {
			$queryString = $db->real_escape_string($_POST['queryString']);
 
			if(strlen($queryString) >0) {
 
				$query = $db->query("SELECT Nom_ville FROM ville WHERE Nom_ville LIKE '".$queryString."%' ");
				if($query) {
 
					while ($row = mysqli_fetch_object($query)) 
					{
	         			echo '<li onClick="fill(\''.$row->Nom_ville.'\');">'.$row->Nom_ville.'</li>';
	         		}
				} else {
					echo 'ERROR: There was a problem with the query.';
				}
			} else {
				// Dont do anything.
			} // There is a queryString.
		} else {
			echo 'There should be no direct access to this script!';
		}
	}
?>

et le formulaire :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
echo"<div>
		<form>
			<div>
				Nom de la ville:
				<br />
				<input type=\"text\" size=\"30\" value=\"\" 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\">
					&nbsp;
				</div>
			</div>
		</form>
	</div>";

C'est un script que j'ai trouvé sur le net, je l'ai modifié très légèrement mais ca fonctionner pas au début non plus.

Pourtant ma requête tri bien sur $variable.% lors de l'appel ..

Une idée ?

Merci

[SpaceFrog]

tu as oublié de preciser le dataType json
jette un oeil sur ce post
http://www.developpez.net/forums/d11...odes-post-get/

[bob633]

Merci pour la réponse, cependant sur le script original (demo ici) il ne précise rien, car sur le lien que tu m'envoies, le code php n'est pas tout à fait pareil, j'aimerais pas mélanger deux codes différents :/ Car je débute en jquery

Car j'ai tenté de rajouté "json" comme paramètre dans la fonction, sans succès.