JQuery et la fonction autocomplete

**XxArchangexX** · 29/07/2015, 17h22

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

.

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 :

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
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

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

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 :

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
{
	"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.

**danielhagnoul** · 29/07/2015, 23h13

Voir le code source de la démonstration : http://jqueryui.com/autocomplete/#remote-jsonp

**XxArchangexX** · 30/07/2015, 10h30

Hello,

Je te remercie, ça ressemble à ce que j'ai lu pour mettre en place le petit module. On voit que le format utilisé et JSONP et je commence à mieux comprendre, le webservice retourne le format JSON, donc avec le format JSONP comme c'est conseillé, ça bloque avec le parseerror à cause du fait que la clef est un string et non un numérique, je vais fouiller si c'est un "bug" ou une restriction connue, il me reste à trouver l'histoire du CORS.

Cette discussion présente bien la situation :

http://stackoverflow.com/questions/1...fore-statement

J'indiquerai si je trouve ou si ma situation est bloquante pour son utilisation.

JQuery et la fonction autocomplete

jQuery

Discussions similaires

Partager

Partager