UI Autocomplete non fonctionnel

**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é.

UI Autocomplete non fonctionnel

jQuery

Discussions similaires

Partager

Partager