Links

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'

API

Last modified 5mo ago