Script d'autocomplétion jQuery

**Kiryto** · 23/05/2013, 11h15

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 :

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
<!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 php :

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

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.

**danielhagnoul** · 23/05/2013, 21h54

Bonsoir

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

Voir le code de la démonstration.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 );
      }
    });

**Kiryto** · 27/05/2013, 16h17

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

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
<!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.

**danielhagnoul** · 27/05/2013, 20h09

Bonsoir

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

Script d'autocomplétion jQuery

jQuery

Vue hybride

Discussions similaires

Partager

Partager