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

• New-UDAutocomplete