New-UDAutocomplete

Sintesi

L'autocomplete è un normale input di testo arricchito da un pannello di opzioni suggerite.

Sintassi

New-UDAutocomplete [-Id <String>] [-Label <String>] [-Value <Object>] [-OnChange <Endpoint>] [-Options <Object>] [-FullWidth] [-AutoSelect] [-Variant <String>] [-Multiple] [-ClassName <String>] [-Icon <Object>] [-OnEnter <Endpoint>] [-Disabled] [<CommonParameters>]

New-UDAutocomplete [-Id <String>] [-Label <String>] [-Value <Object>] [-OnChange <Endpoint>] -OnLoadOptions <Endpoint> [-FullWidth] [-AutoSelect] [-Variant <String>] [-Multiple] [-ClassName <String>] [-Icon <Object>] [-OnEnter <Endpoint>] [-Disabled] [<CommonParameters>]

Descrizione

Le caselle di testo autocomplete possono essere utilizzate per consentire all'utente di effettuare una selezione da un ampio elenco di elementi statici o dinamici. Digitando nella casella di testo l'elenco viene filtrato.

Parametri

-Id

L'ID del componente. Per impostazione predefinita è un GUID casuale.

Required?                    false
Position?                    named
Default value                ([Guid]::NewGuid())
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-Label

L'etichetta da mostrare per la casella di testo.

Required?                    false
Position?                    named
Default value
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-Value

Il valore della casella di testo.

Required?                    false
Position?                    named
Default value
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-OnChange

Un blocco di script che viene invocato quando la selezione cambia.

Required?                    false
Position?                    named
Default value
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-OnLoadOptions

Un blocco di script che viene chiamato quando l'utente inizia a digitare nella casella di testo. La variabile $Body conterrà il testo digitato. Deve restituire un array JSON di valori che sono il risultato di ciò che l'utente ha digitato.

Required?                    true
Position?                    named
Default value
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-Options

Opzioni statiche da visualizzare nel menu a discesa di selezione. Quando l'utente digita, queste opzioni vengono filtrate.

Required?                    false
Position?                    named
Default value                @()
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-FullWidth

Se il componente deve occupare l'intera larghezza del suo elemento padre.

Required?                    false
Position?                    named
Default value                False
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-AutoSelect

Se il componente deve essere selezionato automaticamente nel caso in cui l'array di opzioni contenga una sola opzione totale.

Required?                    false
Position?                    named
Default value                False
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-Variant

La variante della casella di testo. I valori validi sono: "filled", "outlined", "standard"

Required?                    false
Position?                    named
Default value                standard
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-Multiple

Se è possibile selezionare più elementi.

Required?                    false
Position?                    named
Default value                False
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-ClassName

Una classe CSS da applicare al componente.

Required?                    false
Position?                    named
Default value
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-Icon

L'icona da visualizzare prima della casella di testo. Utilizzi New-UDIcon per creare il valore di questo parametro.

Required?                    false
Position?                    named
Default value
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-OnEnter

Un blocco di script da chiamare quando l'utente preme invio all'interno della casella di testo autocomplete.

Required?                    false
Position?                    named
Default value
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-Disabled

Se questo autocomplete è disabilitato.

Required?                    false
Position?                    named
Default value                False
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

Parametri comuni

Questo cmdlet supporta i parametri comuni: Verbose, Debug, ErrorAction, ErrorVariable, WarningAction, WarningVariable, OutBuffer, PipelineVariable e OutVariable. Per maggiori informazioni, veda about_CommonParameters.

Output

Esempi

Esempio 1: autocomplete di base

New-UDAutocomplete -Options @('Test', 'Test2', 'Test3', 'Test4') -Id 'autocomplete1' -FullWidth

Il valore deve essere scelto da un insieme predefinito di valori consentiti.

Esempio 2

New-UDAutocomplete -Options @("Test", "No", "Yes") -Multiple  -Id 'autocomplete2' -FullWidth

Multi-Select|Allow the user to select multiple values.

Esempio 3: varianti

New-UDStack -Content {
   New-UDAutocomplete -Options @("Test", "No", "Yes") -Variant 'filled'  -Id 'autocomplete3' -FullWidth
   New-UDAutocomplete -Options @("Test", "No", "Yes") -Variant 'outlined'  -Id 'autocomplete4' -FullWidth
   New-UDAutocomplete -Options @("Test", "No", "Yes") -Variant 'standard'  -Id 'autocomplete5' -FullWidth
} -Direction 'column' -FullWidth

Modifichi lo stile della casella di testo autocomplete.

Esempio 4: gestione delle modifiche

New-UDAutocomplete -Options @("Test", "No", "Yes") -OnChange {
   Show-UDToast $EventData
}  -Id 'autocomplete6' -FullWidth

Esegua PowerShell quando l'autocomplete cambia.

Esempio 5: OnEnter

New-UDAutocomplete -Options @("Test", "No", "Yes") -OnEnter {
   Show-UDToast $EventData
} -Id 'autocomplete7' -FullWidth

Esegua PowerShell quando l'utente preme invio.

Esempio 6: opzioni asincrone

New-UDAutocomplete -OnLoadOptions {
  @('Test', 'Test2', 'Test3', 'Test4') | Where-Object { $_ -match $Body } | ConvertTo-Json
} -Id 'autocomplete8' -FullWidth

Crea un autocomplete con un insieme di opzioni filtrato dinamicamente

Esempio 7

New-UDAutocomplete -Options @(
   New-UDAutocompleteOption -Name 'Test' -Value 'test' -Group 'Group1'
   New-UDAutocompleteOption -Name 'Test2' -Value 'test2' -Group 'Group1'
   New-UDAutocompleteOption -Name 'Test3' -Value 'test3' -Group 'Group2'
   New-UDAutocompleteOption -Name 'Test4' -Value 'test4' -Group 'Group2'
) -Id 'autocomplete9' -FullWidth