Saisie automatique

Composant de saisie automatique pour les applications universelles

La saisie automatique est un champ de texte ordinaire amélioré par un panneau d'options suggérées.

Liste statique d'options

Crée une saisie automatique de base avec une liste statique d'options.

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

Liste dynamique d'options

Lorsque du texte est saisi, il peut être filtré à l'aide de OnLoadOptions. $Body contiendra le texte actuellement saisi.

Cet exemple filtre le tableau avec Where-Object.

New-UDAutocomplete -OnLoadOptions { 
    @('Test', 'Test2', 'Test3', 'Test4') | Where-Object { $_ -like "*$Body*" } | ConvertTo-Json
}

OnChange

$Body contient l'élément actuellement sélectionné. L'événement OnChange se déclenche lorsque l'utilisateur sélectionne un ou plusieurs éléments.

New-UDAutocomplete -OnLoadOptions { 
    @('Test', 'Test2', 'Test3', 'Test4') | Where-Object { $_ -like "*$Body*" } | ConvertTo-Json
} -OnChange {
    Show-UDToast $Body 
}

Icône

Vous pouvez placer une icône avant la saisie automatique en utilisant le paramètre -Icon.

New-UDAutocomplete -Options @("Test", "No", "Yes") -Icon (New-UDIcon -Icon 'Users') 

OnEnter

OnEnter se déclenche lorsque l'utilisateur appuie sur la touche Entrée dans la saisie automatique.

New-UDAutocomplete -Options @("Test", "No", "Yes") -onEnter {
    Show-UDToast ((Get-UDElement -Id 'ac').value)
} -Id 'ac'

Options

Vous pouvez utiliser New-UDAutoCompleteOption pour spécifier des noms et des valeurs.

New-UDAutocomplete -Options @(
    New-UDAutoCompleteOption -Name 'Adam D' -Value '1'
    New-UDAutoCompleteOption -Name 'Sarah F' -Value '2'
    New-UDAutoCompleteOption -Name 'Tom S' -Value '3'
)

API

• New-UDAutocomplete