JQuery et la fonction autocomplete
Bonjour,
Dans le cadre d'un petit projet, je dois mettre en place une petite interface avec l'auto-complétion, au début je suis partie sur un dev perso en full javascript mais ce n'est pas du tout optimisé. Sans connaitre, je suis tombé sur JQuery et sa fonction "autocomplete", au début j'ai dit "youpi" et en fait je galère un peu :D.
J'ai donc :
- Une interface HTML simple avec un champ input
- Un webservice REST hébergé par une autre entreprise
Mon souci:
- Quand je fais une recherche avec le dataType : "json" j'ai une erreur CORS et quand j'utilise "jsonp", j'ai une erreur "parseerror"
Pour CORS en fouillant sur internet, j'ai activé le header module (j'utilise wamp), puis j'ai placé dans le httpd.conf tout ce qui va bien mais ça bloque toujours. Je suis en train de me dire que c'est du côté du serveur qui héberge le webservice REST que ça bloque, possible ?
Auriez-vous une idée de la pièce du puzzle qui me manque ?
Mon code :
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
55
56
57
58
59
60
61
62
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Use REST Services with jQuery to build an autocomplete box</title>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.2.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.11/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.11/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.ui-autocomplete-loading
{
background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
}
#searchBox
{
width: 25em;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#searchBox").autocomplete({
source: function (request, response) {
$.ajax({
url: "https://www.domaine.fr/services/fonction?",
type: 'GET',
cache: false,
data: {
typeResultat : "json",
variable :"",
},
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function( data ) {
response( data );
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
//alert('error - ' + textStatus);
console.log('error', textStatus, errorThrown);
}
});
},
minLength: 5,
});
});
</script>
</head>
<body>
<div>
<div class="ui-widget">
<label for="searchBox">
Search:
</label>
<input id="searchBox" />
</div>
<div id="searchResult" class="ui-widget" style="margin-top: 1em;">
</div>
</div>
</body>
</html> |
Avec Json
Citation:
Une demande multi-origines (Cross-Origin Request) a été bloquée : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur
https://domaine/services/fonction. Ceci peut être corrigé en déplaçant la ressource sur le même domaine ou en activant CORS.
Avec jsonp
Citation:
SyntaxError: missing ; before statement rechercheListeAdresse:2
"error" "parsererror" "jQuery152021517735939425386_1438182689037 was not called"
Résultat de l'erreur, quand je clique sur la console Firefox, il surligne la ligne en gras :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
{
"reponse" : {
"var" : "0",
"var1" : "40",
"var2" : "1",
"var3" : "270",
"var4" : info,
"adresse" : [
{
"var5" : "39505",
"var6" : ""
}
]
}
} |
En vous remerciant d'avance :).
Bonne fin de journée.
