New-UDAutocomplete

Sinopsis

El autocompletado es una entrada de texto normal mejorada con un panel de opciones sugeridas.

Sintaxis

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

Descripción

Los cuadros de texto de autocompletado se pueden usar para permitir que el usuario seleccione de una larga lista de elementos estáticos o dinámicos. Al escribir en el cuadro de texto se filtrará la lista.

Parámetros

-Id

El ID del componente. Su valor predeterminado es un GUID aleatorio.

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

-Label

La etiqueta que se muestra para el cuadro de texto.

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

-Value

El valor del cuadro de texto.

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

-OnChange

Un bloque de script que se invoca cuando cambia la selección.

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

-OnLoadOptions

Un bloque de script que se llama cuando el usuario empieza a escribir en el cuadro de texto. La variable $Body contendrá el texto escrito. Debe devolver una matriz JSON de valores que sean el resultado de lo que el usuario ha escrito.

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

-Options

Opciones estáticas que se muestran en la lista desplegable de selección. Cuando el usuario escriba, estas opciones se filtrarán.

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

-FullWidth

Si el componente debe ocupar todo el ancho de su elemento principal.

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

-AutoSelect

Si el componente debe seleccionarse automáticamente en caso de que solo hubiera una única opción en total en la matriz de opciones.

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

-Variant

La variante del cuadro de texto. Los valores válidos son: "filled", "outlined", "standard"

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

-Multiple

Si se pueden seleccionar varios elementos.

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

-ClassName

Una clase CSS que se aplica al componente.

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

-Icon

El icono que se muestra antes del cuadro de texto. Use New-UDIcon para crear el valor de este parámetro.

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

-OnEnter

Un bloque de script que se llama cuando el usuario pulsa Intro dentro del cuadro de texto de autocompletado.

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

-Disabled

Si este autocompletado está deshabilitado.

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

Parámetros comunes

Este cmdlet admite los parámetros comunes: Verbose, Debug, ErrorAction, ErrorVariable, WarningAction, WarningVariable, OutBuffer, PipelineVariable y OutVariable. Para más información, consulte about_CommonParameters.

Salidas

Ejemplos

Ejemplo 1: autocompletado básico

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

El valor debe elegirse de un conjunto predefinido de valores permitidos.

Ejemplo 2

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

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

Ejemplo 3: variantes

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

Cambie el estilo del cuadro de texto de autocompletado.

Ejemplo 4: gestión de cambios

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

Ejecute PowerShell cuando cambie el autocompletado.

Ejemplo 5: OnEnter

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

Ejecute PowerShell cuando el usuario pulse Intro.

Ejemplo 6: opciones asíncronas

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

Crea un autocompletado con un conjunto de opciones filtrado dinámicamente

Ejemplo 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