feat: add basic autocompletion on inputs expecting a field name (#2281)

Eg. the labelKey or filterKey input.

umap/static/umap/js/modules/data/layer.js

@@ -428,6 +428,10 @@ export class DataLayer extends ServerStored {
     if (idx !== -1) this._propertiesIndex.splice(idx, 1)
   }
 
+  allProperties() {
+    return this._propertiesIndex
+  }
+
   sortedValues(property) {
     return Object.values(this._features)
       .map((feature) => feature.properties[property])

umap/static/umap/js/modules/global.js

@@ -1,5 +1,5 @@
 import { uMapAlert as Alert } from '../components/alerts/alert.js'
-import { AjaxAutocomplete, AjaxAutocompleteMultiple } from './autocomplete.js'
+import { AjaxAutocomplete, AjaxAutocompleteMultiple, AutocompleteDatalist } from './autocomplete.js'
 import Help from './help.js'
 import { ServerRequest } from './request.js'
 import { SCHEMA } from './schema.js'
@@ -17,6 +17,7 @@ window.U = {
   Alert,
   AjaxAutocomplete,
   AjaxAutocompleteMultiple,
+  AutocompleteDatalist,
   Help,
   Icon,
   LAYER_TYPES,

umap/static/umap/js/modules/umap.js

@@ -684,7 +684,7 @@ export default class Umap extends ServerStored {
   }
 
   allProperties() {
-    return [].concat(...this.datalayersIndex.map((dl) => dl._propertiesIndex))
+    return [].concat(...this.datalayersIndex.map((dl) => dl.allProperties()))
   }
 
   sortedValues(property) {

umap/static/umap/js/umap.forms.js

@@ -448,6 +448,17 @@ L.FormBuilder.BlurInput.include({
   },
 })
 
+// Adds an autocomplete using all available user defined properties
+L.FormBuilder.PropertyInput = L.FormBuilder.BlurInput.extend({
+  build: function () {
+    L.FormBuilder.BlurInput.prototype.build.call(this)
+    const autocomplete = new U.AutocompleteDatalist(this.input)
+    // Will be used on Umap and DataLayer
+    const properties = this.builder.obj.allProperties()
+    autocomplete.suggestions = properties
+  },
+})
+
 L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
   type: () => 'hidden',
 
@@ -1110,10 +1121,11 @@ U.FormBuilder = L.FormBuilder.extend({
   },
 
   customHandlers: {
-    sortKey: 'BlurInput',
+    sortKey: 'PropertyInput',
     easing: 'Switch',
-    facetKey: 'BlurInput',
+    facetKey: 'PropertyInput',
-    slugKey: 'BlurInput',
+    slugKey: 'PropertyInput',
+    labelKey: 'PropertyInput',
   },
 
   computeDefaultOptions: function () {