UI Autocomplete. Requête sur une source JSONP
Bonjour,
J'utilise JQuery depuis peu (que je trouve très pratique et facile à utiliser) et je voudrais me servir du plugin JQuery UI pour faire de l'autocomplétion.
Je me suis basé sur l'exemple "Remote JSONP datasource" car j'utilise un fichier php qui me génère du JSON.
Voici un exemple de JSON généré par mon fichier (autocomplétion de villes) :
Code:
{"totalResultsCount":6,"villes":[{"nom":" Roaillan ","codepostal":"33210"},{"nom":" Roaix ","codepostal":"84110"},{"nom":" Roannes-Saint-Mary ","codepostal":"15220"},{"nom":" Robécourt ","codepostal":"88320"},{"nom":" Robecq ","codepostal":"62350"},{"nom":" Robehomme ","codepostal":"14860"},{"nom":" Robersart ","codepostal":"59550"},{"nom":" Robert-Espagne ","codepostal":"55000"},{"nom":" Robertot ","codepostal":"76560"},{"nom":" Roberval ","codepostal":"60410"},{"nom":" Robion ","codepostal":"84440"},{"nom":" Rocamadour ","codepostal":"46500"}]}
Voici le code de mon formulaire :
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
| <html>
<head>
<script type="text/javascript">
$(function() {
function log(message) {
$("<div/>").text(message).prependTo("#log");
$("#log").attr("scrollTop", 0);
}
$("#localisation").autocomplete({
source: function(request, response) {
$.ajax({
url: "include/villes.inc.php",
dataType: "jsonp",
data: {
maxRows: 12,
debut: request.term
},
Success: function(data) {
response($.map(data.villes, function(item) {
return {
label: item.nom,
value: item.nom
}
}))
}
})
},
minLength: 2,
select: function(event, ui) {
log(ui.item ? ("Selected: " + ui.item.label) : "Nothing selected, input was " + this.value);
},
open: function() {
$(this).removeClass("ui-corner-all").addClass("ui-corner-top");
},
close: function() {
$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
}
});
});
</script>
</head>
<body>
Localisation
<div class="ui-widget">
<label for="localisation"></label>
<input id="localisation" />
</div>
<div class="ui-widget">
Result:
<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>
</body>
</html> |
Malheureusement, quand je commence à taper 2 caractères, j'ai le champ qui affiche le petit gif tournoyant de temporisation et ça reste bloqué ainsi.
Quand j'y regarde de plus près, je m'aperçois que ma requête AJAX ne passe pas en success.
Avez-vous une idée de ce qui peut poser problème ?
PS: Voici le code php du fichier qui génère le JS (rien n'est optimisé, c'est juste pour tester) :
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
| <?php
include ('db.inc.php');
$debut=$_GET['debut'];
$query="select Nom, Code_Postal, Code_INSEE, Code_Region, Latitude, Longitude from ville where MAJ like '".str_replace("'","''",$debut)."%' order by Nom asc limit 0,12";
$result=$db->query($query);
echo '{"totalResultsCount":'.$result->columnCount().',';
echo '"villes":[';
$cpt=0;
foreach($db->query($query) as $row)
{
if ($cpt!=0)
echo ",";
echo '{"nom":"'.$row['Nom'].'","codepostal":"'.$row['Code_Postal'].'"}';
$cpt++;
}
echo "]}";
?> |
Merci d'avance :)
