feat: add option to format results (#256)

README.md

@@ -1,6 +1,9 @@
 # Leaflet.GeoSearch
+
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+
 [![All Contributors](https://img.shields.io/badge/all_contributors-39-orange.svg?style=flat-square)](#contributors-)
+
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 **Demo and Docs: [smeijer.github.io/leaflet-geosearch](https://smeijer.github.io/leaflet-geosearch)**
@@ -216,7 +219,8 @@ new GeoSearchControl({
     icon: new L.Icon.Default(),
     draggable: false,
   },
-  popupFormat: ({ query, result }) => result.label, // optional: function    - default returns result label
+  popupFormat: ({ query, result }) => result.label, // optional: function    - default returns result label,
+  resultFormat: ({ result }) => result.label, // optional: function    - default returns result label
   maxMarkers: 1, // optional: number      - default 1
   retainZoomLevel: false, // optional: true|false  - default false
   animateZoom: true, // optional: true|false  - default true
@@ -234,6 +238,8 @@ open a popup with the location text.
 
 `popupFormat` is callback function for displaying text on popup.
 
+`resultFormat` is callback function for modifying the search result texts (e. g. in order to hide address components or change its ordering).
+
 `maxMarker` determines how many last results are kept in memory. Default 1, but
 perhaps you want to show the last `x` results when searching for new queries as
 well.
@@ -348,6 +354,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 
 <!-- markdownlint-enable -->
 <!-- prettier-ignore-end -->
+
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
-This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
+This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

src/SearchControl.ts

@@ -25,6 +25,7 @@ const defaultOptions: Omit<SearchControlProps, 'provider'> = {
   showMarker: true,
   showPopup: false,
   popupFormat: ({ result }) => `${result.label}`,
+  resultFormat: ({ result }) => `${result.label}`,
   marker: {
     icon: L && L.Icon ? new L.Icon.Default() : undefined,
     draggable: false,
@@ -75,6 +76,8 @@ interface SearchControlProps {
     result: SearchResult<T>;
   }): string;
 
+  resultFormat<T = any>(args: { result: SearchResult<T> }): string;
+
   searchLabel: string;
   notFoundMessage: string;
   messageHideDelay: number;
@@ -339,7 +342,7 @@ const Control: SearchControl = {
     if (query.length) {
       let results = await provider!.search({ query });
       results = results.slice(0, this.options.maxSuggestions);
-      this.resultList.render(results);
+      this.resultList.render(results, this.options.resultFormat);
     } else {
       this.resultList.clear();
     }

src/resultList.ts

@@ -29,13 +29,13 @@ export default class ResultList {
     this.resultItem = createElement<HTMLDivElement>('div', cx(classNames.item));
   }
 
-  render(results: SearchResult[] = []): void {
+  render(results: SearchResult[] = [], resultFormat: Function): void {
     this.clear();
 
     results.forEach((result, idx) => {
       const child = this.resultItem.cloneNode(true) as HTMLDivElement;
       child.setAttribute('data-key', `${idx}`);
-      child.innerHTML = result.label;
+      child.innerHTML = resultFormat(result);
       this.container.appendChild(child);
     });