Autocomplete
Autocomplete component for Universal Dashboard
The autocomplete is a normal text input enhanced by a panel of suggested options.
Static List of Options
Creates a basic autocomplete with a static list of options
New-UDAutocomplete -Options @('Test', 'Test2', 'Test3', 'Test4')
Dynamic List of Options
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
}
OnChange
$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
}
Icon
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
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'
Options
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'
)
API
