Discussion :

[RogaDev]

Slt à tous et à toutes , je suis vraiment content d'être avec vous

Svp aujoud'hui je me trouve devant un probleme que j'essai de resoudre depui deux jours
en effet j'essai de faire une recherche automatique via un API "une autosuggestion".
Pour le moment j'utilise ajax pour le developpement mais je n'est aucun resultat apres resultat.

Je vous demande de m'aidez pour la resolution de ce probleme.

Merci

[psychadelic]

Dans la barre d'URL du navigateur ?
donc une extension pour Chrome ?

autosuggestion ça veut rien dire, sauf si tu veux faire un truc genre méthode couet.
Tu veux dire autocompletion ?

soit plus clair !

[RogaDev]

Bonjour,
En effet s'est d'une autocompletion q'u'il s'agit.
j'ai mon url mais je n'arrive tourjours pas à trouver le bon script pour recupérer les donnnées de mon url.

voici le code que j'utilise

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
		<form action="#">
			<input type="text" name="what"id="what">
		</form>

Code JavaScript :

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
 
	$(function ()
{
	$("#what").autocomplete({
		source: function (request, response)
		{
			 $.ajax({
		 "async": true,
		  "crossDomain": true,
		  "method": "GET",
		  "headers": {}
 
        "url": "https://api.what3words.com/v2/autosuggest?addr=index.home.raft&key=GDEFCTEK&focus=51.521251%2C-0.203586&lang=fr&format=json&display=full",
         data: { q: request.term },
            dataType: "json",
            success: function (data) {
				var suggestions=[];
                response($.map(data.features, function (item) {
 
                    if ($.inArray(item.properties.words, suggestions) == -1) {
                        suggestions.push(item.properties.words);
                        return { label: item.properties.words 
                        };
                    }
                }));
            }
        });
		},
 
		minLength: 1,
		delay: 600
	});
});

[psychadelic]

https://lmgtfy.com/?q=javascript+autocompletion
https://github.com/search?q=autocompletion

[NoSmoking]

Bonjour,
je ne saisi pas ce que tu cherches à récupérer, quand on tape ton URL dans la barre d'adresse on obtient :

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
{
  "thanks": "Thanks from all of us at index.home.raft for using a what3words API",
  "suggestions": [{
    "country": "gb",
    "distance": 0,
    "words": "index.home.raft",
    "rank": 1,
    "language": "en",
    "geometry": {
      "lng": -0.203586,
      "lat": 51.521251
    },
    "place": "Bayswater, London"
  }, {
    "country": "gb",
    "distance": 9,
    "words": "index.mole.raft",
    "rank": 2,
    "language": "en",
    "geometry": {
      "lng": -0.214518,
      "lat": 51.603291
    },
    "place": "Hendon, London"
  }, {
    "country": "gb",
    "distance": 7,
    "words": "index.dimes.raft",
    "rank": 3,
    "language": "en",
    "geometry": {
      "lng": -0.121206,
      "lat": 51.553134
    },
    "place": "Holloway, London"
  }],
  "status": {
    "reason": "OK",
    "status": 200
  }
}

donc dans le success de ton appel Ajax il te faut faire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
success: function( data ) {
  var result = [];
  console.log( "data" ,data);
  $.each(data.suggestions, function(ind, elem){
      result.push( elem.words);  // ICI le champ que tu veux récupérer
    });
  response( result );
}

Ceci étant il semblerait que tu ais toujours le même résultat en retour et ce quelque soit la saisie dans ton champ what, est-ce vraiment de l'« autocomplétion » que tu cherches à faire ?

[Watilin]

Sinon il y a <datalist> qui permet une mise en œuvre sans ajax

[RogaDev]

Salut en effet dans mon application j'utilise un datalist. Mais je voudrais le faire maitenant avec un API qui me donne le resultat.
Normalement avec l'API je voudrais recupéré words"index.mole.raft".

[RogaDev]

Bon je réexplique ma préoccupation.

Je voudrais faire une autocomplete à partir de ce lien, qui est un API.
https://api.what3words.com/v2/autosu...n&display=full

Evidemment quand on va sur le lien on a :

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
 
{
  "thanks": "Thanks from all of us at index.home.raft for using a what3words API",
  "suggestions": [{
    "country": "gb",
    "distance": 0,
    "words": "index.home.raft",
    "rank": 1,
    "language": "en",
    "geometry": {
      "lng": -0.203586,
      "lat": 51.521251
    },
    "place": "Bayswater, London"
  }, {
    "country": "gb",
    "distance": 9,
    "words": "index.mole.raft",
    "rank": 2,
    "language": "en",
    "geometry": {
      "lng": -0.214518,
      "lat": 51.603291
    },
    "place": "Hendon, London"
  }, {
    "country": "gb",
    "distance": 7,
    "words": "index.dimes.raft",
    "rank": 3,
    "language": "en",
    "geometry": {
      "lng": -0.121206,
      "lat": 51.553134
    },
    "place": "Holloway, London"
  }],
  "status": {
    "reason": "OK",
    "status": 200
  }
}

JE veux récupere les differents résultat du words pour mon autocomplete

[psychadelic]

fallait mieux t'expliquer, c'est pas un probleme Ajax, ni un probleme d'une mise en place compliquée d'un algorithme d'autocompletion ...

mais juste un probleme de lecture d'un arbre JSON

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
  elment_Word_0 = reponseJSON.suggestions[0].words;
  elment_Word_1 = reponseJSON.suggestions[1].words;
  // ....

ou encore

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
  elment_Word_0 = reponseJSON["suggestions"][0]["words"]
  elment_Word_1 = reponseJSON["suggestions"][1]["words"]
  // ....

[Watilin]

Voici un code qui ajoute à la <datalist> tous les words trouvés dans le JSON, et fait aussi un petit peu de gestion d’erreur. Cela suppose que le JSON est récupéré au format texte, probablement depuis une requête ajax (les … dans mon code sont à compléter).

Ce script doit être placé au minimum après la <datalist>, ou bien dans une fonction DOMContentLoaded (ou en jQuery, .ready()).

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
let $datalist = document.querySelector("datalist");
 
let jsonObj;
try {
  jsonObj = JSON.parse( … );
}
catch (err) {
  console.error(err);
}
 
if (jsonObj) {
  for (let sugg of jsonObj.suggestions) {
    let $option = document.createElement("option");
    $option.textContent = sugg.words;
    $datalist.append($option);
  }
}

[RogaDev]

Bonjour à tous, je me sent pour une fois très nul.
vus les tentatives, je n'arrive tourjours pas à resoudre mon probleme.

En me penchant sur la méthode que propose Mr Watilin j'ai se resultat de code:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<input type='text' name="what" id="what" list="what">
<datalist id="what"></datalist>

Code JAVASCRIPT :

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
 
<script>
$("#what").autocomplete({
		var settings = {
	  async: true,
	  crossDomain: true,
	  url: "https://api.what3words.com/v2/autosuggest?addr=index.home.r&key=GDEFCTEK&focus=51.521251%2C-0.203586&clip=none&lang=fr&format=json&display=full",
	  method: "GET",
	  headers: {}
	}
 
let $datalist = document.querySelector("datalist");
let jsonObj;
try {
  jsonObj = JSON.parse(settings);
}
catch (err) {
  console.error(err);
}
 
if (jsonObj) {
  for (let sugg of jsonObj.suggestions) {
 
	let $data= document.createElement("datalist");
    $data.textContent = sugg.words;
    $datalist.append($data);
  }
}
});
 
</script>

[Toufik83]

tu étais presque ... dans ton poste #3, il fallait juste enlever une erreur de syntaxe + une gestion de résultat.

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
 
//creation d'une fonction display qui traite les données.
display=function(o){
	var suggestions=[];
		$.map(o.suggestions, function (item,key) {
			$.map(item,function(v,k){
			if(k=='words'){
				suggestions.push({ label: v});
			}
 
			});
		});
	return suggestions;
}
$("#what").autocomplete({
       source: function (request, response)
	{
	      $.ajax({
		 "async": true,
		  "crossDomain": true,
		  "method": "GET",
		  "headers": {},
		  "url":"https://api.what3words.com/v2/autosuggest?addr=index.home.raft&key=GDEFCTEK&focus=51.521251%2C0.203586&lang=fr&format=json&display=full",
                  "data": { q: request.term },
                  "dataType": "json",
                  "success": function (data) {
			response(display(data));//utilisation directe de display()
                    }
             });
	},
       minLength: 1,
	delay: 600
});

[RogaDev]

Salut c'est encore moi malheureusement, vraiment merci beaucoup pour votre soutient.

Je ne me portais pas très bien, j'ai eu o moin deux jours sans meme toucher à mon bureau

merci beaucoup Mr Toufik83, votre code fonction très bien et m'affiche les éléments de la liste de suggestion. Mais elle ne fait pas une recherche normale comme je le voulait. En effet dès que je saisie n'importe quelle élément,j'ai la liste complete des words de la suggestion et non en fonction de la lettre ou du mot saisie.
En resumé l'autocompletion ne fonctionne pas.

[Toufik83]

dans ce cas il faut ajouter un deuxième paramètre dans la fonction display pour faire la comparaison, modifie display comme suite :

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
display=function(o,terme){
	var suggestions=[];
	$.map(o.suggestions, function (item,key) {
		$.map(item,function(v,k){
		    if(k=='words'){
			if(v.indexOf(terme.toLowerCase())>=0){
                        /*l’occurrence ici peut être au début, au milieu ou à la fin des  'words', si tu veux la chercher juste au début tu peux mettre 
                        ==0 au lieu de >=0, utilise aussi toLowerCase() pour prendre en considération les majuscules et minuscules.*/ 
				suggestions.push({ label: v});
			}
 
		    }
 
			});
	});
	if(suggestions.length==0){
		suggestions.push({label:'aucun résultat trouvé.'});
        }
	return suggestions;
	}

et n'oublie pas d'ajouter le paramètre lors de l'appel de la fonction :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
success: function (data) {
	response(display(data,request.term));
}

[RogaDev]

Merci beaucoup pour le bout de code apporté MrToufik83

cela fonction correctement. maintenant je vais pouvoir l'adapté a mon besoin

Merci a tous pour votre aide