Merge pull request #311 from IGNF/fix/search-autocomplete-results

feat(search) : Options pour améliorer l'affichage des résultats d'autocompletion

samples-src/pages/tests/SearchEngine/pages-ol-searchengine-modules-dsfr-filter-duplicate.html

@@ -0,0 +1,104 @@
+{{#extend "ol-sample-modules-dsfr-layout"}}
+
+{{#content "vendor"}}
+
+        <link rel="stylesheet" href="{{ baseurl }}/dist/modules/GpfExtOlSearchEngine.css" />
+        <script src="{{ baseurl }}/dist/modules/GpfExtOlSearchEngine.js"></script>
+{{/content}}
+
+{{#content "head"}}
+        <title>Sample openlayers SearchEngine</title>
+{{/content}}
+
+{{#content "style"}}
+        <style>
+            div#map {
+                width: 100%;
+                height: 500px;
+            }
+        </style>
+{{/content}}
+
+{{#content "body"}}
+            <h2>Ajout du moteur de recherche avec les options ppour filtrer les résultats de l'autocomplete</h2>
+            <!-- map -->
+            <div id="map">
+            </div>
+{{/content}}
+
+{{#content "js"}}
+            <script type="text/javascript">
+                if (window.Gp) {
+                    // activation des loggers
+                    Gp.Logger.enableAll();
+                }
+                var map;
+                var createMap = function() {
+                    // on cache l'image de chargement du Géoportail.
+                    document.getElementById('map').style.backgroundImage = 'none';
+
+					// 1. Création de la map
+                    map = new ol.Map({
+                        target : "map",
+                        view : new ol.View({
+                            center : [288074.8449901076, 6247982.515792289],
+                            zoom : 6
+                        }),
+                        layers : [
+                            new ol.layer.Tile({
+                                source: new ol.source.OSM(),
+                                // zIndex : 4,
+                                opacity: 0.5
+                            })
+                        ]
+                    });
+
+					// 2. Appel du SearchEngine avec filtre sur les résultats affichés de l'autocmpletion
+                    // On ne garde que 5 résultats filtrés sur les 10 requêtés
+                    var search = new ol.control.SearchEngine({
+                        autocompleteOptions : {
+                            serviceOptions : {
+                                maximumResponses : 10,
+                            },
+                            triggerGeocode : false,
+                            triggerDelay : 1000,
+                            prettifyResults : true,
+                            maximumEntries : 5
+                        },
+                        splitResults : false,
+                        markerUrl : "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAzNiIgd2lkdGg9IjQ4IiBoZWlnaHQ9IjQ4Ij48cGF0aCBmaWxsPSIjMDAwMDkxIiBkPSJNMTguMzY0IDMuNjM2YTkgOSAwIDAgMSAwIDEyLjcyOEwxMiAyMi43MjhsLTYuMzY0LTYuMzY0QTkgOSAwIDAgMSAxOC4zNjQgMy42MzZaTTEyIDhhMiAyIDAgMSAwIDAgNCAyIDIgMCAwIDAgMC00WiIvPjwvc3ZnPg=="
+                    });
+
+					// 3. Ajout du SearchEngine à la carte
+                    map.addControl(search);
+
+                    // 4. Evenements
+                    search.on("searchengine:autocomplete:click", function (e) {
+                        console.warn("autocomplete", e.location);
+                    });
+                    search.on("searchengine:search:click", function (e) {
+                        console.warn("search", e.suggest);
+                    });
+                    search.on("searchengine:geocode:click", function (e) {
+                        console.warn("location", e.location);
+                    });
+                    search.on("searchengine:geolocation:click", function (e) {
+                        console.warn("geolocation", e.coordinates);
+                    });
+                    search.on("searchengine:coordinates:click", function (e) {
+                        console.warn("coordinate", e.coordinates);
+                    });
+                };
+                Gp.Services.getConfig({
+                    customConfigFile : "{{ configurl }}",
+                     callbackSuffix : "",
+                     timeOut : 20000,
+                     onSuccess : createMap,
+                     onFailure : (e) => {
+                       console.error(e);
+                     }
+                 });
+           </script>
+{{/content}}
+
+{{/extend}}

src/packages/Controls/SearchEngine/SearchEngine.js

@@ -55,6 +55,7 @@ var logger = Logger.getLogger("searchengine");
  * @param {Boolean} [options.displayMarker = true] - set a marker on search result, defaults to true.
  * @param {String}  [options.markerStyle = "lightOrange"] - Marker style. Currently possible values are "lightOrange" (default value), "darkOrange", "red" and "turquoiseBlue".
  * @param {String}  [options.markerUrl = ""] - Marker url. By default, if not specified, use option markerStyle. Otherwise, you can added a http url or a base64 image.
+ * @param {Boolean} [options.splitResults = true] - False to disable layers search
  * @param {Boolean} [options.displayButtonAdvancedSearch = false] - False to disable advanced search tools (it will not be displayed). Default is false (not displayed)
  * @param {Boolean} [options.displayButtonGeolocate = false] - False to disable advanced search tools (it will not be displayed). Default is false (not displayed)
  * @param {Boolean} [options.displayButtonCoordinateSearch = false] - False to disable advanced search tools (it will not be displayed). Default is false (not displayed)
@@ -94,6 +95,8 @@ var logger = Logger.getLogger("searchengine");
  * @param {Object}  [options.autocompleteOptions.serviceOptions] - options of autocomplete service
  * @param {Boolean} [options.autocompleteOptions.triggerGeocode = false] - trigger a geocoding request if the autocompletion does not return any suggestions, false by default
  * @param {Number}  [options.autocompleteOptions.triggerDelay = 1000] - waiting time before sending the geocoding request, 1000ms by default
+ * @param {Number}  [options.autocompleteOptions.maximumEntries] - maximum autocompletion results we want to display
+ * @param {Boolean} [options.autocompleteOptions.prettifyResults = false] - apply a filter/prettifier function to clean or prettify autocomplete entries
  * @param {Sting|Numeric|Function} [options.zoomTo] - zoom to results, by default, current zoom.
  *       Value possible : auto or zoom level.
  *       Possible to overload it with a function :
@@ -327,7 +330,8 @@ var SearchEngine = class SearchEngine extends Control {
                     maximumResponses : 5,
                 },
                 triggerGeocode : false,
-                triggerDelay : 1000
+                triggerDelay : 1000,
+                prettifyResults : false
             },
             displayMarker : true,
             markerStyle : "lightOrange",
@@ -1689,6 +1693,8 @@ var SearchEngine = class SearchEngine extends Control {
 
         var _triggerGeocode = this.options.autocompleteOptions.triggerGeocode;
         var _triggerDelay = this.options.autocompleteOptions.triggerDelay;
+        var _maximumEntries = this.options.autocompleteOptions.maximumEntries;
+        var _prettifyResults = this.options.autocompleteOptions.prettifyResults;
 
         // INFORMATION
         // on effectue la requête au service d'autocompletion.
@@ -1716,6 +1722,15 @@ var SearchEngine = class SearchEngine extends Control {
                             context._locationsToBeDisplayed.push(ilocation);
                         }
                     };
+                    // on filtre et enjolive éventuellement les résultats
+                    if (_prettifyResults === true) {
+                        context._prettifyAutocompleteResults(context._locationsToBeDisplayed);
+                    }
+                    // on ne garde que le nombre de résultats que l'on veut afficher
+                    if (_maximumEntries) {
+                        context._locationsToBeDisplayed = context._locationsToBeDisplayed.slice(0, _maximumEntries);
+                    }
+
                     // on affiche les résultats qui n'ont pas des coordonnées nulles
                     context._fillAutoCompletedLocationListContainer(context._locationsToBeDisplayed);
                     // on annule eventuellement une requete de geocodage en cours car on obtient des
@@ -2449,6 +2464,29 @@ var SearchEngine = class SearchEngine extends Control {
         }
     }
 
+    /**
+     * this method is called by this.onAutoCompleteSearchText()
+     * and it clears suggested location from duplicate entries and improve unprecise fulltext entries.
+     *
+     * @param {Array} autocompleteResults - Array of autocompleteResults to display
+     * @private
+     */
+    _prettifyAutocompleteResults (autocompleteResults) {
+        for (var i = autocompleteResults.length - 1; i >= 0; i--) {
+            var autocompleteResult = autocompleteResults[i];
+            if ((autocompleteResult.type === "StreetAddress" && autocompleteResult.kind === "municipality") ||
+            autocompleteResult.type === "PositionOfInterest" && autocompleteResult.poiType[0] === "lieu-dit habité" && autocompleteResult.poiType[1] === "zone d'habitation") {
+                // on retire les éléments streetAdress - municipality car déjà pris en compte par POI
+                autocompleteResults.splice(i, 1);
+            }
+            // on précise le type dans le fulltext au POI des types département et région
+            if ((autocompleteResult.type === "PositionOfInterest" && autocompleteResult.poiType[0] === "administratif" &&
+                (autocompleteResult.poiType[1] === "département" || autocompleteResult.poiType[1] === "région"))) {
+                autocompleteResult.fullText = autocompleteResult.fullText + ", " + autocompleteResult.poiType[1];
+            }
+        };
+    }
+
     /**
      * this method is called to hide suggested locations
      *