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

Eg. the labelKey or filterKey input.
This commit is contained in:
Yohan Boniface 2024-12-05 17:32:27 +01:00 committed by GitHub
commit 171aba6676
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 22 additions and 5 deletions

View file

@ -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])

View file

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

View file

@ -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) {

View file

@ -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',
slugKey: 'BlurInput',
facetKey: 'PropertyInput',
slugKey: 'PropertyInput',
labelKey: 'PropertyInput',
},
computeDefaultOptions: function () {