Autocomplete
Autocomplete component for Universal Apps
The autocomplete is a normal text input enhanced by a panel of suggested options.
Creates a basic autocomplete with a static list of options
New-UDAutocomplete -Options @('Test', 'Test2', 'Test3', 'Test4')
When text is typed, it can be filtered with
OnLoadOptions. $Body will contain the current text that is typed. This example filters the array with
Where-Object. New-UDAutocomplete -OnLoadOptions {
@('Test', 'Test2', 'Test3', 'Test4') | Where-Object { $_ -like "*$Body*" } | ConvertTo-Json
}
$Body contains the currently selected item. The OnChange event will fire when the user selects one or more items.New-UDAutocomplete -OnLoadOptions {
@('Test', 'Test2', 'Test3', 'Test4') | Where-Object { $_ -like "*$Body*" } | ConvertTo-Json
} -OnChange {
Show-UDToast $Body
}
You can place an icon before an autocomplete by using the
-Icon parameter.New-UDAutocomplete -Options @("Test", "No", "Yes") -Icon (New-UDIcon -Icon 'Users')
OnEnter is triggered when the user presses the enter key within the autocomplete.
New-UDAutocomplete -Options @("Test", "No", "Yes") -onEnter {
Show-UDToast ((Get-UDElement -Id 'ac').value)
} -Id 'ac'
You can use
New-UDAutoCompleteOption to specify name and values. New-UDAutocomplete -Options @(
New-UDAutoCompleteOption -Name 'Adam D' -Value '1'
New-UDAutoCompleteOption -Name 'Sarah F' -Value '2'
New-UDAutoCompleteOption -Name 'Tom S' -Value '3'
)
Last modified 5mo ago