Recherche automatique via un URL

Version imprimable

07/09/2018, 13h52
RogaDev

Recherche automatique via un URL

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
07/09/2018, 16h06
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 !

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:

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

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
 
	$(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
	});
});

11/09/2018, 13h24
psychadelic

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

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:

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:

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 ?

11/09/2018, 19h59
Watilin

Sinon il y a <datalist> qui permet une mise en œuvre sans ajax :)
12/09/2018, 11h18
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".

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:

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

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 :roll::ptdr:
Code:

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

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

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:

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); } }

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:

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

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

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

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
 
//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
});

17/09/2018, 11h56
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.

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

Code:

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:

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

17/09/2018, 17h59
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