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.

UI Autocomplete non fonctionnel

jQuery

Vue hybride

Discussions similaires

Partager

Partager