Script d'autocomplétion jQuery

Version imprimable

Bonjour tout le monde, je souhaite faire un script d'autocomplétion jQuery.

Ce script devra remplir la case dès sa prise de focus.

J'ai donc téléchargé le jQuery avec l'option "autocomplete" sur le site officiel.

Voici le code HTML que j'ai écris :

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
<!DOCTYPE html>
	<html>
		<head>
			<link type="text/css" rel="stylesheet" href="jquery/jquery.autocomplete.css" />
			<script type="text/javascript" src="jquery/jquery-1.9.1.js"></script>	
			<script type="text/javascript" src="jquery/jquery-ui-1.10.3.custom.min.js"></script>		
		</head>
 
		<body>
 
		<form method="post" action="">
			<p>Nom :</p> <input type="text"  id="auton" name="nom" size="12" /><br />
				<!-- Script d'autocomplétion Jquery pour le nom -->
				<script>
					$(document).ready(function() {
						$('#auton').autocomplete('autocompletionN.php', {delay: 1});
					});	
				</script>
 
			<p>Pr&eacute;nom : </p> <input type="text" id="autop" name="prenom" size="12" /><br />
				<!-- Script d'autocomplétion Jquery pour le prénom -->
				<script>
					$(document).ready(function() 
						{
							$("#autop").autocomplete(["Cedric","Valentin"], {
								minLength: 0,
								delay: 1,
								extraParams: {
									nom: function() {
										return $("#auton").val(); 
										}
									}
								}
							).focus(function() {
								$(this).autocomplete("search", "", {
								minLength: 0,
								delay: 1,
								extraParams: {
									nom: function() {
										return $("#auton").val(); 
										}
									}
								});
								}
							);
						}
					);	
				</script>						
		</body>
	</html>

Ainsi que le code de la page "autocompletionN.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
<?php
	$PARAM_utilisateur='***';
	$PARAM_mot_passe='***';
 
	try {
		$connexion = new PDO('mysql:host=localhost;dbname=db1', $PARAM_utilisateur, $PARAM_mot_passe);
	}
	catch(Exception $e){
		echo 'Erreur lors de la connexion';
		echo $e;
	}
			// si on reçoit une donnée
			if(isset($_GET['q'])) {
				$q = htmlentities($_GET['q']); // protection
 
				// écriture de la requête
				$requete = "SELECT nom FROM Utilisateur WHERE nom LIKE '". $q ."%' LIMIT 0, 10";
				// exécution de la requête
				$resultat = $connexion->query($requete) or die(print_r($connexion->errorInfo()));
				// affichage des résultats
				while($donnees = $resultat->fetch(PDO::FETCH_ASSOC)) {
					echo $donnees['nom'] ."\n";
				}
			}
?>

L'erreur rencontrée étant celle-ci :

Citation:

Erreur : Error: cannot call methods on autocomplete prior to initialization; attempted to call method 'autocompletionN.php'
Fichier Source : http://***/test/jquery/jquery-1.9.1.js
Ligne : 507

Merci d'avance pour vos réponses.

Bonsoir

$('#auton').autocomplete('autocompletionN.php', {delay: 1});.

Voir le code de la démonstration.

Code:

1
2
3
4
5
6
7
8
9
    $( "#birds" ).autocomplete({
      source: "search.php",
      minLength: 2,
      select: function( event, ui ) {
        log( ui.item ?
          "Selected: " + ui.item.value + " aka " + ui.item.id :
          "Nothing selected, input was " + this.value );
      }
    });

J'ai essayé de retravailler le code et je suis arrivé a ça :

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
<!DOCTYPE html>
	<html>
		<head>
			<link type="text/css" rel="stylesheet" href="jquery/jquery.autocomplete.css" />
			<script type="text/javascript" src="jquery/jquery.js"></script>	
			<script type="text/javascript" src="jquery/jquery.autocomplete.js"></script>		
			<script type="text/javascript" src="jquery/jquery-1.9.1.js"></script>	
			<script type="text/javascript" src="jquery/jquery-ui-1.10.3.custom.min.js"></script>	
		</head>
 
		<body>
 
		<form method="post" action="">
			<p>Nom :</p> <input type="text"  id="auton" name="nom" size="12" /><br />
				<!-- Script d'autocomplétion Jquery pour le nom -->
				<script>	
				$(document).ready(function() 
						{
							$("#auton").autocomplete({
								source: 'autocompletionN.php',
								minLength: 1,
								delay: 1,
								extraParams: {
									nom: function() {
										return $("#autop").val(); 
										}
									}
								}
							).focus(function() {
								$(this).autocomplete("search", "", {
								minLength: 1,
								delay: 1,
								extraParams: {
									nom: function() {
										return $("#autop").val(); 
										}
									}
								});
								}
							);
						}
					);	
				</script>
 
					<!-- $(document).ready(function() {
						$('#auton').autocomplete(source: "search.php", {delay: 1});
					});	-->
			<p>Pr&eacute;nom : </p> <input type="text" id="autop" name="prenom" size="12" /><br />
				<!-- Script d'autocomplétion Jquery pour le prénom -->
				<script>					
						$(document).ready(function() 
						{
							$("#autop").autocomplete({
								source: 'autocompletionP.php',
								minLength: 1,
								delay: 1,
								extraParams: {
									nom: function() {
										return $("#auton").val(); 
										}
									}
								}
							).focus(function() {
								$(this).autocomplete("search", "", {
								minLength: 1,
								delay: 1,
								extraParams: {
									nom: function() {
										return $("#auton").val(); 
										}
									}
								});
								}
							);
						}
					);	
				</script>
		</body>
	</html>

Le problème est que j'ai toujours un "No search result" malgrès le fait que j'entre une valeur présente dans la base de données.

Mes pages autocompletionN.php et autocompletionP.php n'étant pas le problème.

Si quelqu'un à une idée je suis preneur.

27/05/2013, 20h09
danielhagnoul

Bonsoir

Votre Array JS, utilise l'une des mises en forme acceptables par l'UI Autocomplete ? Voir : http://api.jqueryui.com/autocomplete/#option-source