UI Autocomplete non fonctionnel [Résolu]

almoha · 05/09/2011, 20h31

Bonjour,

J'utilise l'Autocomplete jquery ui avec les codes suivants :

Page formulaire_search.php :

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
 
 
<head>
 
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="Stylesheet" />	
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
 
<script type="text/javascript">
 
$(function() {
 
            $("#state").autocomplete({
                source: "search_autocomplete.php",
                minLength: 2,
                select: function(event, ui) {
                    $('#state_id').val(ui.item.id);
                }
            });
 
 
        });
 
 
</script>
 
 
</head>
 
<body>
 
<form action="search_autocomplete.php"  method="post">
<fieldset>
<legend>Recherche</legend>
 
<p class="">
 
<label for="state">Rechercher un contributeur ou un titre </label>
 
<input type="text" id="state"  name="state" /> 
 
</p>
 
<input type="hidden" id="state_id" name="state_id" />
 
<p><input type="submit" name="submitBtn" value="Submit" /></p>
 
</fieldset>
</form>
 
 
</body>
</html>

Page search_autocomplete.php :

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
 
<?php
 
header('Content-type: text/html; charset=UTF-8');
 
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$dbname = 'db';
 
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error connecting to mysql');
mysql_select_db($dbname);
 
 
$return_arr = array();
 
if ($conn)
{
 
	$fetch = mysql_query("SELECT * FROM livre where titre like '%" . mysql_real_escape_string($_GET['term']) . "%'"); 
 
	while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {
		$row_array['value'] = $row['titre'];
		$row_array['id_livre'] = $row['id_livre'];
 
        array_push($return_arr,$row_array);
    }
}
 
mysql_close($conn);
 
echo json_encode($return_arr);
 
 
?>

Mais lorsque je tape le début d'un titre dans le champ texte, l'autocompletion ne se déclenche pas. En soumettant le formulaire, la liste de tous mes livres s'affiche en JSON :
Notice: Undefined index: term in...
[{"value":"Ceux qui dorment en ces murs","id_livre":"194"},{"value":"Sang Royal","id_livre":"211"},...]

Selon Firebug les librairies se chargent bien.Par ailleurs l'onglet XHR de firebug montre que la requête se fait avec une réponse. Exemple si je tape "pal", la requête suivante s'effectue : GET search_autocomplete?term=pal. Firebug indique la réponse cohérente suivante :

[{"value":null,"id_livre":"1791"},{"value":null,"id_livre":"5220"},{"value":"La reine dans le palais des courants d'air","id_livre":"5328"},{"value":"Reine de Palmyre","id_livre":"9252"},{"value":"L'homme aux yeux de napalm","id_livre":"11234"},{"value":"Opale","id_livre":"12943"}].

Voyez-vous pourquoi le système ne fonctionne pas ? Merci.

danielhagnoul · 05/09/2011, 22h45

Bonsoir

Je vous suggère d'essayer :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<form action="search_autocomplete.php"  method="post">
	<fieldset>
		<legend>Recherche</legend>
		<div class="ui-widget">
			<label for="state">Rechercher un contributeur ou un titre </label>
			<input type="text" id="state"  name="state" /> 
		</div>
		<input type="hidden" id="state_id" name="state_id" />
		<p><input type="submit" name="submitBtn" value="Submit" /></p>
	</fieldset>
</form>

almoha · 05/09/2011, 23h21

Malheureusement, malgré cette modification, la liste des propositions ne s'affiche toujours pas dans le champ input text, alors que la requête se fait bien , si l'on en croit firebug... J'avoue ne pas comprendre. Je suis preneur de toute aide complémentaire.Merci.

danielhagnoul · 05/09/2011, 23h31

Je n'ai aucun moyen de tester, je vous conseille d'essayer de rendre l'UI Autocomplete fonctionnel sans le formulaire, limiter tous les codes à l'essentiel.

Code :

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

1
2
3
4
<div class="ui-widget">
   <label for="state">Rechercher un contributeur ou un titre </label>
   <input type="text" id="state" name="state" /> 
</div>

almoha · 06/09/2011, 21h00

Bonjour,

J'ai essayé avec ce code minimal mais le système ne fonctionne toujours pas. J'ai fait plusieurs essais de modification mais en vain. Comment puis-je traquer l'erreur qui empêche l'affichage des propositions ? J'avoue en perdre mon latin... Je peux poster mes fichiers si vous souhaitez encore m'aider. Merci.

ABCIWEB · 06/09/2011, 22h22

Es-tu certain qu'il ne te manque pas des fichiers dans tes inclusions ?

Je me sert de cette page et ça fonctionne bien.

almoha · 06/09/2011, 22h45

Oui j'ai utilisé cette page en téléchargeant le pack complet avec tous les composants... J'ai testé sans passer par le fichier php externe (requête sql et encodage en json) avec l'exemple basique donné sur le site jquery ui :

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
 
<script>
	$(function() {
		var availableTags = [
			"ActionScript",
			"AppleScript",
			"Asp",
			"BASIC",
			"C",
			"C++",
			"Clojure",
			"COBOL",
			"ColdFusion",
			"Erlang",
			"Fortran",
			"Groovy",
			"Haskell",
			"Java",
			"JavaScript",
			"Lisp",
			"Perl",
			"PHP",
			"Python",
			"Ruby",
			"Scala",
			"Scheme"
		];
		$( "#tags" ).autocomplete({
			source: availableTags
		});
	});
	</script>

Avec cet exemple, l'autocompletion fonctionne... Merci pour toute aide complémentaire.

danielhagnoul · 06/09/2011, 23h17

Bonsoir

Le seul moyen d'examiner votre code dans les mêmes conditions que vous est de disposer d'un lien vers la page de test.

almoha · 07/09/2011, 22h49

Bonsoir,

Je travaille pour l'instant en local avec WAMPSERVER (php 5.3.3). Je n'ai pour l'instant pas d'hébergeur. Est-il possible que je mette à disposition mes 2 fichiers et la requête de ma table (limitée à 10 enregistrements) pour rendre possible des tests en local ? Merci de votre intérêt.

[Edit danielhagnoul, 2011-09-09] Problème résolu, fichier PHP erroné.

06/09/2011, 22h22	#6
ABCIWEB Membre Expert Inscription : septembre 2010 Messages : 1 242 Détails du profil Informations forums : Inscription : septembre 2010 Messages : 1 242 Points : 1 564 Points : 1 564	Es-tu certain qu'il ne te manque pas des fichiers dans tes inclusions ? Je me sert de cette page et ça fonctionne bien. __________________ - Réalisations - Interface graphique : génération en javascript d'objets défilants, texte et/ou images, mode horizontal ou vertical.
	00

06/09/2011, 23h17	#8
danielhagnoul Rédacteur Daniel Hagnoul Étudiant perpétuel Inscription : février 2009 Messages : 3 221 Détails du profil Informations personnelles : Nom : Daniel Hagnoul Âge : 61 Localisation : Belgique Informations professionnelles : Activité : Étudiant perpétuel Secteur : Enseignement Informations forums : Inscription : février 2009 Messages : 3 221 Points : 6 767 Points : 6 767	Bonsoir Le seul moyen d'examiner votre code dans les mêmes conditions que vous est de disposer d'un lien vers la page de test. __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	00

05/09/2011, 23h21	#3
almoha Membre du Club Inscription : janvier 2010 Messages : 210 Détails du profil Informations personnelles : Âge : 37 Informations forums : Inscription : janvier 2010 Messages : 210 Points : 53 Points : 53	Malheureusement, malgré cette modification, la liste des propositions ne s'affiche toujours pas dans le champ input text, alors que la requête se fait bien , si l'on en croit firebug... J'avoue ne pas comprendre. Je suis preneur de toute aide complémentaire.Merci.
	00

06/09/2011, 21h00	#5
almoha Membre du Club Inscription : janvier 2010 Messages : 210 Détails du profil Informations personnelles : Âge : 37 Informations forums : Inscription : janvier 2010 Messages : 210 Points : 53 Points : 53	Bonjour, J'ai essayé avec ce code minimal mais le système ne fonctionne toujours pas. J'ai fait plusieurs essais de modification mais en vain. Comment puis-je traquer l'erreur qui empêche l'affichage des propositions ? J'avoue en perdre mon latin... Je peux poster mes fichiers si vous souhaitez encore m'aider. Merci.
	00

07/09/2011, 22h49	#9
almoha Membre du Club Inscription : janvier 2010 Messages : 210 Détails du profil Informations personnelles : Âge : 37 Informations forums : Inscription : janvier 2010 Messages : 210 Points : 53 Points : 53	Bonsoir, Je travaille pour l'instant en local avec WAMPSERVER (php 5.3.3). Je n'ai pour l'instant pas d'hébergeur. Est-il possible que je mette à disposition mes 2 fichiers et la requête de ma table (limitée à 10 enregistrements) pour rendre possible des tests en local ? Merci de votre intérêt. [Edit danielhagnoul, 2011-09-09] Problème résolu, fichier PHP erroné.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email