New-UDAutocomplete

The autocomplete is a normal text input enhanced by a panel of suggested options.

Synopsis

The autocomplete is a normal text input enhanced by a panel of suggested options.

Syntax

New-UDAutocomplete [-Id <String>] [-Label <String>] [-Value <Object>] [-OnChange <Endpoint>] [-Options <Object>] [-FullWidth] [-AutoSelect] [-Variant <String>] [-Multiple] [-ClassName <String>] [-Icon <Object>] [-OnEnter <Endpoint>] [-Disabled] [<CommonParameters>]

    New-UDAutocomplete [-Id <String>] [-Label <String>] [-Value <Object>] [-OnChange <Endpoint>] -OnLoadOptions <Endpoint> [-FullWidth] [-AutoSelect] [-Variant <String>] [-Multiple] [-ClassName <String>] [-Icon <Object>] [-OnEnter <Endpoint>] [-Disabled] [<CommonParameters>]

Description

Autocomplete text boxes can be used to allow the user to select from a large list of static or dynamic items. Typing in the textbox will filter the list.

Parameters

-Id

The ID of the component. It defaults to a random GUID.

Required?                    false
Position?                    named
Default value                ([Guid]::NewGuid())
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-Label

The label to show for the textbox.

Required?                    false
Position?                    named
Default value
Accept pipeline input?       false
Aliases
Accept wildcard characters?  false

-Value The value of the textbox.Required? falsePosition? namedDefault valueAccept pipeline input? falseAliasesAccept wildcard characters? false-OnChangeA script block that is invoked when the selection changes.Required? falsePosition? namedDefault valueAccept pipeline input? falseAliasesAccept wildcard characters? false-OnLoadOptionsA script block that is called when the user starts typing in the text box. The $Body variable will contain the typed text. You should return a JSON array of values that are a result of what the user has typed.Required? truePosition? namedDefault valueAccept pipeline input? falseAliasesAccept wildcard characters? false-Options Static options to display in the selection drop down. When the user types, these options will be filtered.Required? falsePosition? namedDefault value @()Accept pipeline input? falseAliasesAccept wildcard characters? false -FullWidth [<SwitchParameter>] Whether the component should take up the full width of its parent.Required? falsePosition? namedDefault value FalseAccept pipeline input? falseAliasesAccept wildcard characters? false -AutoSelect [<SwitchParameter>] Whether the component should automatically be selected if there was only one total option with the options array.Required? falsePosition? namedDefault value FalseAccept pipeline input? falseAliasesAccept wildcard characters? false-VariantThe variant of the text box. Valid values are: "filled", "outlined", "standard"Required? falsePosition? namedDefault value standardAccept pipeline input? falseAliasesAccept wildcard characters? false -Multiple [<SwitchParameter>] Whether multiple items can be selected.Required? falsePosition? namedDefault value FalseAccept pipeline input? falseAliasesAccept wildcard characters? false-ClassNameA CSS class to apply to the component.Required? falsePosition? namedDefault valueAccept pipeline input? falseAliasesAccept wildcard characters? false-Icon The icon to display before the text box. Use New-UDIcon to create the value for this parameter.Required? falsePosition? namedDefault valueAccept pipeline input? falseAliasesAccept wildcard characters? false-OnEnterA script block to call when the user presses enter within the autocomplete textbox.Required? falsePosition? namedDefault valueAccept pipeline input? falseAliasesAccept wildcard characters? false -Disabled [<SwitchParameter>] Whether this autocomplete is disabled.Required? falsePosition? namedDefault value FalseAccept pipeline input? falseAliasesAccept wildcard characters? false <CommonParameters> This cmdlet supports the common parameters: Verbose, Debug, ErrorAction, ErrorVariable, WarningAction, WarningVariable, OutBuffer, PipelineVariable, and OutVariable. For more information, see about_CommonParameters (https://go.microsoft.com/fwlink/?LinkID=113216).Outputs-------------------------- EXAMPLE 1 --------------------------PS >New-UDAutocomplete -Options @('Test', 'Test2', 'Test3', 'Test4') -Id 'autocomplete1' -FullWidthBasic autocomplete|The value must be chosen from a predefined set of allowed values.-------------------------- EXAMPLE 2 --------------------------PS >New-UDAutocomplete -Options @("Test", "No", "Yes") -Multiple -Id 'autocomplete2' -FullWidthMulti-Select|Allow the user to select multiple values.-------------------------- EXAMPLE 3 --------------------------PS >New-UDStack -Content {PS > New-UDAutocomplete -Options @("Test", "No", "Yes") -Variant 'filled' -Id 'autocomplete3' -FullWidthPS > New-UDAutocomplete -Options @("Test", "No", "Yes") -Variant 'outlined' -Id 'autocomplete4' -FullWidthPS > New-UDAutocomplete -Options @("Test", "No", "Yes") -Variant 'standard' -Id 'autocomplete5' -FullWidthPS > } -Direction 'column' -FullWidthVariants|Change the the style of the autocomplete textbox.-------------------------- EXAMPLE 4 --------------------------PS >New-UDAutocomplete -Options @("Test", "No", "Yes") -OnChange {PS > Show-UDToast $EventDataPS > } -Id 'autocomplete6' -FullWidthHandling changes|Execute PowerShell when the autocomplete changes.-------------------------- EXAMPLE 5 --------------------------PS >New-UDAutocomplete -Options @("Test", "No", "Yes") -OnEnter {PS > Show-UDToast $EventDataPS > } -Id 'autocomplete7' -FullWidthOnEnter|Execute PowerShell when the user presses enter.-------------------------- EXAMPLE 6 --------------------------PS >New-UDAutocomplete -OnLoadOptions {PS > @('Test', 'Test2', 'Test3', 'Test4') | Where-Object { $_ -match $Body } | ConvertTo-JsonPS > } -Id 'autocomplete8' -FullWidthAsynchronous options|Creates an autocomplete with a dynamically filtered set of options-------------------------- EXAMPLE 7 --------------------------PS >New-UDAutocomplete -Options @(PS > New-UDAutocompleteOption -Name 'Test' -Value 'test' -Group 'Group1'PS > New-UDAutocompleteOption -Name 'Test2' -Value 'test2' -Group 'Group1'PS > New-UDAutocompleteOption -Name 'Test3' -Value 'test3' -Group 'Group2'PS > New-UDAutocompleteOption -Name 'Test4' -Value 'test4' -Group 'Group2'PS > ) -Id 'autocomplete9' -FullWidth