Liste de Recherche : empêcher la sélection autonomatique au survol

**Zebulon777** · 08/09/2015, 14h25

Bonjour à tous,

j'ai un "piti" problème de focus-souris sur la recherche.

Pour effectuer une recherche de ville dans mon application, j'utilise ce code :

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
34
35
36
37
 
var tbx5 = viewer.getMap().getControlsByClass('Geoportal.Control.ToolBox')[0];
WCoRech = tbx5.id+'_search';
var B_Recherche = new Geoportal.Control.Panel({
	div:OpenLayers.Util.getElement(WCoRech)
});
...
...
...
//Ajout du contrôle de recherche avec VILLE
var GeoNames = new Geoportal.Control.LocationUtilityService.GeoNames(
new Geoportal.Layer.OpenLS.Core.LocationUtilityService(
	"PositionOfInterest:OPENLS;Geocode",//layer name
	{
	  formatOptions: {},
					styleMap:style_geocoded, //Application du style pour le nom de la ville sélectionnée.
					marker: "./Images/Recherche2_32x32.png",/* entrer ici l'URL de l'image */
					radius: 20 // redéfinition de la taille de l'image (optionnel)					
	}
),
		{
  drawLocation:true,
//        setZoom: Geoportal.Control.LocationUtilityService.GeoNames.setZoomForBDNyme,
			uiOptions:{title: 'gpControlLocationUtilityService.GeoNames.title'},
			setZoom:function(f) 
			{
				var z = 11;// Initialisation du ZOOM en cas de résultat positif
				return z;
			},
  autoCompleteOptions: {}
}
);
 
nv.addControls([GeoNames]);
...
...
...

Ca fonctionne très bien... Ou presque : quand on commence à saisir un nom, la liste déroulante s'ouvre automatiquement et si on a la malheur de passer la souris sur cette liste, ça sélectionne le nom survolé, ce qui est une source d'erreur pour nos utilisateurs.

Pour que ce soit plus clair, voici une petite image de ce que ça donne, sachant que dans cet exemple, j'ai commencé à saisir "Beauvais" :

Nom : Rech.png
Affichages : 420
Taille : 18,1 Ko

Nom : Rech.png
Affichages : 420
Taille : 18,1 Ko

Est-ce qu'il y aurait donc un moyen pour éviter cela ?

**jrenard** · 08/09/2015, 14h47

Bonjour,

Il existe une option du contrôle d'autocomplétion qui gère le comportement au survol souris, il s'agit d'une fonction qui s'appelle highlightOver. Par défaut, le survol souris déclenche la transmission de l'élément survolé au contenu de l'input, pour modifier ce comportement on va redéfinir la fonction. Ca se passe au niveau de autoCompleteOptions :

Code javascript :

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

1
2
3
4
5
6
autoCompleteOptions: {
    highlightOver: function(index) {
        this.highlightIndex= index+1;
        this.highlightProposal(false); // annule la transmission à l'input
    }
}

Et le tour est joué.

**Zebulon777** · 08/09/2015, 14h52

Super, merci beaucoup, c'est exactement ça.

**Zebulon777** · 14/10/2015, 15h26

Je relance cette discussion c ar nous venons de nous rendre compte d'un truc bizarre : lorsqu'on ouvre la fenêtre de la ville à rechercher, on commence à saisir le nom de la ville, puis si on descend avec le clavier, ça sélection toujours la ville en dessous de celle qui est en surbrillance.
Idem avec la souris.

J'espère que je me fais bien comprendre.
Par exemple, dans l'image c'est 49250 qui est sélectionné, mais si je clique ou que j'appuie sur le touche entrée, la recherche s'effectuera sur 45190.

Une idée pour corriger ça ?

**Zebulon777** · 15/10/2015, 15h07

Aie, personne n'a la solution ou mon message est passé inaperçu ?

**jrenard** · 15/10/2015, 15h29

En supprimant la ligne this.highlightIndex= index+1; ça devrait revenir dans l'ordre

**Zebulon777** · 26/10/2015, 11h17

Bonjour et désolé d'avoir mis si longtemps à répondre, mais j'étais sur un autre projet...

Mais bon, ce n'est pas encore ça qu'est ça ; suite à la suppression de cette ligne : à la souris, c'est la bonne ville qui est bien sélectionner dans la liste de présélection de la recherche, mais si j'utilise le clavier (touches fléchées et entrée), c'est toujours la ville située sous celle en surbrillance qui est sélectionnée au moment de l'appui sur la touche "entrée".

En fait, j'ai refait quelques essais avec ou sans cette fameuse ligne et ça ne change rien au comportement.

**Zebulon777** · 28/10/2015, 08h26

Salut tout le monde, je me permet de faire remonter le sujet, car je pense qu'il est passé à la trappe

**jrenard** · 28/10/2015, 16h28

Envoyé par Zebulon777

En fait, j'ai refait quelques essais avec ou sans cette fameuse ligne et ça ne change rien au comportement.

Bonjour,

Tu peux me certifier que l'ajout/retrait de cette ligne ne change rien ? C'est extrêmement étrange...
Peux-tu faire un console.log('test') dans ta fonction highlightOver et nous dire si 'test' s'affiche bien dans ta console lorsque tu survoles un résultat ? Histoire d'être sûr que la fonction est bien parcourue.

**Zebulon777** · 30/10/2015, 09h45

Bonjour, bonjour,

j'ai enfin eu le temps de faire les tests que tu demandais :

Sans la ligne
- A la souris : je commence à taper le nom d'une ville, la liste se déroule, je sélectionne une ville et la recher me positionne bien sur la bonne ville SAUF qu'on ne voit pas les lignes de la liste se mettre en surbrillance au passage de la souris. Le déroulement du programme passe bien dans la fonction "highlightOver".
- au clavier : je commence à taper le nom d'une ville, la liste se déroule, j'utilise la flèche bas pour me positionner sur une ville, et lorsque j'appuie sur la touche entée, la recherche me positionne sur la ville dont le nom était en-dessous de celle que je voulais sélectionner. Le déroulement du programme NE passe PAS dans la fonction "highlightOver".

Avec la ligne
- A la souris : je commence à taper le nom d'une ville, la liste se déroule, je sélectionne une ville et la recher me positionne bien sur la bonne ville, on voit les lignes de la liste se mettre en surbrillance au passage de la souris. Le déroulement du programme passe bien dans la fonction "highlightOver".
- au clavier : exactement le même comportement.

Je remets mon code pour que ça soit plus facile :

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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
// Bouton RECHERCHE PAR NOM DE COMMUNES
if (P_Pltf != "ACCUEIL") // ON DESACTIVE LA RECHERCHE SUR LA PAGE D'ACCUEIL
{
	var tbx5 = viewer.getMap().getControlsByClass('Geoportal.Control.ToolBox')[0];
	WCoRech = tbx5.id+'_search';
	var B_Recherche = new Geoportal.Control.Panel({
		div:OpenLayers.Util.getElement(WCoRech)
	});

// style pour afficher le nom de la ville sélectionnée 
	var style_geocoded = new OpenLayers.StyleMap(
		{
			"default": new OpenLayers.Style(
				{
				externalGraphic : './Images/Recherche2_32x32.png',
				pointRadius:20,
				fillText:'black',
				label:'${labelg}', 
//      labelBackgroundColor:'black', 
				fontFamily:'Comic Sans MS',
				fontSize:'12',
				fontWeight:'bold',
				fontColor:'white',
				labelOutlineColor: "#000000", // Police blanche avec contour noir
				labelOutlineWidth: 3 // Police blanche avec contour noir
				}, 
				{
					context: {
							labelg: function(f) 
							{
									return f.data.address.places[0].name+', ('+f.data.address.postalCode.name+')';
							}
							}
					}
			)
		}
	);
//FIN 
	
  //Ajout du contrôle de recherche avec VILLE
	var GeoNames = new Geoportal.Control.LocationUtilityService.GeoNames(
		new Geoportal.Layer.OpenLS.Core.LocationUtilityService(
			"PositionOfInterest:OPENLS;Geocode",//layer name
			{
			  formatOptions: {},
							styleMap:style_geocoded, //Application du style pour le nom de la ville sélectionnée.
							marker: "./Images/Recherche2_32x32.png",/* entrer ici l'URL de l'image */
							radius: 20 // redéfinition de la taille de l'image (optionnel)					
			}
		),
				{
		  drawLocation:true,
		//        setZoom: Geoportal.Control.LocationUtilityService.GeoNames.setZoomForBDNyme,
					uiOptions:{title: 'gpControlLocationUtilityService.GeoNames.title'},
					setZoom:function(f) 
					{
						var z = 11;// Initialisation du ZOOM en cas de résultat positif
						return z;
					},
		  autoCompleteOptions: 
			{
		// Permet d'empêcher la sélection automatique d'une ville au survol de la liste de présélections.				
			highlightOver: function(index) {
					this.highlightIndex= index+1;
					this.highlightProposal(false); // annule la transmission à l'input
					}
			}
		}
	);
	nv.addControls([GeoNames]);
	
	// Application d'un style au bouton
	WIconeRech = "./Images/Recherche2.png";
//		var B_RechHTML = document.getElementsByClassName("gpControlLocationUtilityServiceGeocodeItemInactive")[0]; // POUR VILLE, ADRESSE, CP
	var B_RechHTML = document.getElementsByClassName("gpControlLocationUtilityServiceGeoNamesItemInactive")[0]; // POUR VILLE UNIQUEMENT
	B_RechHTML.style.background = 'none'; // Permet de ne pas afficher l'image avec le fond de type "bouton"
	B_RechHTML.style.border = 'none'; // Permet de ne pas afficher l'image avec le fond de type "bouton"
	B_RechHTML.style.backgroundImage = 'url("'+WIconeRech+'")';
	B_RechHTML.style.width = "16px";
	B_RechHTML.style.height = "16px";
	B_RechHTML.style.position = "absolute";
	B_RechHTML.style.left = XRech;//"104px";
	B_RechHTML.style.top = YRech;//"5px";
	B_RechHTML.style.cursor = "Pointer";
};

**Zebulon777** · 28/01/2016, 13h55

Bon, c'est vrai que ça fait quelques temps que je n'avais plus travaillé sur ce projet, mais j'y reviens et donc je relance la discussion car je n'ai toujours pas réussit à régler ce problème.

**Zebulon777** · 11/04/2016, 10h35

Aie, personne ne peut m'aider sur ce bête problème, mais pas si bête ?

**Zebulon777** · 14/06/2019, 10h22

Résolu.
C'était un bug du côté de l'IGN.

Liste de Recherche : empêcher la sélection autonomatique au survol

IGN API Géoportail

Discussions similaires

Partager

Partager