jQuery Autocomplete : Impossible d'afficher le résultat JSON

Version imprimable

Bonjour à tous,

Ça faite 2 jours que je me casse la tête sur ce problème et je ne trouve aucune solution.
J'aimerais faire un autocomplete en jQuery avec une source Ajax.
Voici mon code client :

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
 
$(".txtNewLine").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        minLength: 3,
                        url: "Ajax.asmx/GetArt",
                        data: "{'pSearch':'" + request.term + "'}",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            response($.map(data.d, function (item) {
                                return {
                                    label: item.label,
                                    value: item.value
                                }
                            }))
                        },
                        error: function (result) {
                            alert('Erreur : ' + result.statusText);
                        }
                    });
                }
            });

Voici ce que retourne mon Ajax.asmx/GetArt avec un document.write(JSON.stringify(data)) dans le success: function (data) { :

Code:

1
2
 
{"d":"[{\"label\":\"146167\",\"value\":\"935677\"},{\"label\":\"283\",\"value\":\"104279\"},{\"label\":\"35604\",\"value\":\"1070023H\"},{\"label\":\"75171\",\"value\":\"583Z438\"},{\"label\":\"150222\",\"value\":\"231385\"},{\"label\":\"159369\",\"value\":\"PC201\"}]"}

Voici ce que retourne mon Ajax.asmx/GetArt depuis mon navigateur :

Code:

1
2
3
 
<?xml version="1.0" encoding="UTF-8"?>
<string xmlns="http://tempuri.org/">[{"label":"146167","value":"935677"},{"label":"283","value":"104279"},{"label":"35604","value":"1070023H"},{"label":"75171","value":"583Z438"},{"label":"150222","value":"231385"},{"label":"159369","value":"PC201"}]</string>

Je n'ai pas d'erreur qui s'affiche.
J'ai tout essayé, je ne sais plus quoi faire :( :( :(

Merci d'avance

21/08/2015, 10h07
SpaceFrog

Essaye de visualiser dans la console (onglet reseau ou xhr ) le retour de ton ajax
tu peux aussi le faire par le code ...

Code:

success: function (data) { console.log(data); },

Code:

1
2
3
4
5
6
7
 
[object Object]
   {
      [functions]: ,
      __proto__: { },
      d: "[{"label":"146167","value":"935677"},{"label":"283","value":"104279"},{"label":"35604","value":"1070023H"},{"label":"75171","value":"583Z438"},{"label":"150222","value":"231385"},{"label":"159369","value":"PC201"}]"
   }

Code:

1
2
3
"success" : function( data ){
  response( data.d );
},

21/08/2015, 10h20
aloisio11

Rien ne s'affiche :(:(
21/08/2015, 10h42
danielhagnoul

Passer par $.map() n'est pas nécessaire si data.d contient déjà le bon array d'objets.

Déjà demandé par SpaceFrog : Que donne un simple console.log( data.d ); ?

Votre code jQuery UI est loin du code source de la démonstration : http://jqueryui.com/autocomplete/#remote

Il est plus proche du code source de la démonstration pour le jsonp : http://jqueryui.com/autocomplete/#remote-jsonp

Les démonstrations sont pour la version 1.11.4 de jQuery UI, si vous utilisez une version obsolète...
21/08/2015, 10h50
aloisio11

Code:

[{"label":"146167","value":"935677"},{"label":"283","value":"104279"},{"label":"35604","value":"1070023H"},{"label":"75171","value":"583Z438"},{"label":"150222","value":"231385"},{"label":"159369","value":"PC201"}]

J'utilise la version v1.11.4

Je ne vois pas comment utiliser mon WebService (asmx) en tant que source avec le code de http://jqueryui.com/autocomplete/#remote
21/08/2015, 10h54
danielhagnoul

Citation:

Envoyé par aloisio11

Code:

[{"label":"146167","value":"935677"},{"label":"283","value":"104279"},{"label":"35604","value":"1070023H"},{"label":"75171","value":"583Z438"},{"label":"150222","value":"231385"},{"label":"159369","value":"PC201"}]

Donc le contenu de "data.d" est correct.

Citation:

Envoyé par aloisio11

J'utilise la version v1.11.4

Parfait !

Citation:

Envoyé par aloisio11

Je ne vois pas comment utiliser mon WebService (asmx) en tant que source avec le code de http://jqueryui.com/autocomplete/#remote

Ce service ne peut pas donner la réponse en jsonp ?

Comment faire pour retourner en JSONP ?

Voici mon WebService

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
Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols

<System.Web.Script.Services.ScriptService()> _
<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
 Public Class Ajax
    Inherits System.Web.Services.WebService

    <WebMethod()> _
    Public Function GetArt(ByVal pSearch As String) As String
        Dim vRes As New List(Of ArtFourBis)
        Dim vArtFour As ArtFourBis
        Dim vDr As Data.SqlClient.SqlDataReader

        vDr = GetReader([MaRequette])

        While vDr.Read
            vArtFour = New ArtFourBis

            vArtFour.label = vDr("IdArtFour").ToString
            vArtFour.value = vDr("CodeFour").ToString

            vRes.Add(vArtFour)
        End While
        vDr.Close()

        Return New System.Web.Script.Serialization.JavaScriptSerializer().Serialize(vRes)
    End Function
End Class

J'ai laissé tombé le JSON et je vais y faire en XML

Voici donc mon nouveau code.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(".txtNewLine").autocomplete({
				source: function (request, response) {
					$.ajax({
						type: "GET",
						url: "Ajax/GetArtFour.aspx?s=" + request.term,
						dataType: "xml",
						success: function (xmlResponse) {
							var data = $("Resultat", xmlResponse).map(function () {
								return {
									value: $("IdArtFour", this).text(),
									id: $("CodeFour", this).text()
								};
							});
							response(data);
						}
					});
				}
			});

La page Ajax/GetArtFour.aspx?s= retourne cela au format XML

Code:

1
2
3
4
5
6
7
8
9
10
11
<?xml version="1.0"?>
<Resultat>
	<ArtFout>
		<IdArtFour>146167</IdArtFour>
		<CodeFour>935677</CodeFour>
	</ArtFout>
	<ArtFout>
		<IdArtFour>283</IdArtFour>
		<CodeFour>104279</CodeFour>
	</ArtFout>
</Resultat>

Le problème c'est que ça m'affiche tous les IdArtFour sur une seule ligne au lieu d'avoir 2 lignes (dans cet exemple).

Des idées ?

Merci d'avance

Je progresse :-)
Dernier problème : Je n'arrive pas a passer les paramètres du champs de recherche.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(".txtNewLine").autocomplete({
				source: function (request, response) {
					$.ajax({
						type: "GET",
						url: "Ajax/GetArtFour.aspx",
						data: "s=" + request.term,
						dataType: "xml",
						minLength: 3,
						success: function (xmlResponse) {
							var data = $("ArtFour", xmlResponse).map(function () {
								return {
									value: $("IdArtFour", this).text(),
									id: $("CodeFour", this).text()
								};
							});
							response(data);
						}
					});
				}
			});

Si je tape dans le champs "PC201" je n'ai aucun résultat.
Par contre si au lieu de data: "s=" + request.term, je mets data: "s=pc201", j'ai mes 5 résultats.

Je comprends pas là ...