Bixby Developer Center

Guides
References

auto-complete

optional

Generates a full screen view of an interactive component that lets users browse content from a specified data range.

As users provide more information in the Search field, Bixby further filters and displays the results with each item in a cell-card. A common use for autocomplete is selecting contacts to send messages, share content, or choose points of interest for pickup or delivery.

Note

If you require permissions in order to complete the action associated with the auto-complete component, there are additional steps and behavior changes you should consider.

Examples

input-view {
match {
Person (this) {
to-input: SelectPersonAutocomplete
}
}

message ("Search for people using autocomplete:")

render {
auto-complete {
type (Person)
no-result-text ("No results")
placeholder ("Search for people")
source {
collect-with (query) {
intent {
goal {
FindPersons
}
value {
SearchTerm$expr(query)
}
}
}
label ("Search results")
where-each (person) {
display {
primary-text {
template ("#{value (person.firstName)} #{value (person.lastName)}")
}
secondary-text {
template ("#{value (person.gender)}")
}
}
on-select {
intent {
goal {
Person
}
value {
viv.core.FormElement(person)
}
}
}
}
}
default-source {
collect {
intent {
goal {
FindPersons
}
}
}
where-each (person) {
display {
primary-text {
template ("#{value (person.firstName)} #{value (person.lastName)}")
}
secondary-text {
template ("#{value (person.gender)}")
}
}
on-select {
intent {
goal {
Person
}
value {
viv.core.FormElement(person)
}
}
}
}
}
}
}
}

View on GitHub

Here is how auto-complete appears on different devices:

MobileWatchTVFridge
autocomplete on MobileWatch does not support this componentTV does not support this componentautocomplete on Fridge
Note

The look and feel of this Views component might differ between devices, specifically with respect to spacing. Mobile, tablet, and fridge devices are similar in design, for example, but have varying resolution and spacing specifications.

Additionally, due to screen limitations on some devices, this component might not render and the user interaction is a voice-only experience.

Usage

Consider the following Thing structure:

// Thing.model.bxb
structure (Thing) {
property (primitive) {
type (MyPrimitive)
min (Required) max (One)
}
}

You might have a corresponding FindThings action model, which returns a Thing that you're looking for:

// FindThings.model.bxb
action (FindThings) {
type (Search)
collect {
input (query) {
type (Query)
min (Required) max (One)
}
}
output (Thing)
}

Additionally, you might need a FindDefaultThings action model like the following:

// FindDefaultThings.model.bxb
action (FindDefaultThings) {
type (Search)
output (Thing)
}

From this, you can create the following autocomplete view file, which displays information on the Thing concept:

// autocomplete.view.bxb
input-view {
match: Thing (this)

message {
template (Give me a thing!)
}

render {
auto-complete {
type (Thing)
no-result-text { template ("Got nothing") }
placeholder { template ("this is just a placeholder") }

// you can define a default source that will be called when no text has been entered into the search field of the autocomplete component - if not defined, your sources will be called with an empty string
default-source {
collect {
// this will call your "FindDefaultThings" action
intent {
goal: FindDefaultThings
}
}
label { template ("default things") }
where-each (thing) {
display {
primary-text { template ("primary text: #{value(thing.primitive)}") }
secondary-text { template ("secondary text: #{value(thing.primitive)}") }
}
on-select {
intent {
goal: Thing
value: viv.core.FormElement(thing)
}
}
}
}

// you can define multiple sources, each calling a different action
source {
collect-with (query) {
// this will call your "FindThings" action, passing the text entered by the user in the search field of the autocomplete component into the query field
intent {
goal: FindThings
value: test.viewTest.Query$expr(query)
}
}
label { template ("what I found") }
where-each (thing) {
display {
primary-text { template ("primary text: #{value(thing.primitive)}") }
secondary-text { template ("secondary text: #{value(thing.primitive)}") }
}
on-select {
intent {
goal: Thing
value: viv.core.FormElement(thing)
}
}
}
}
}
}
}

If an item from the from the auto-complete list is selected, that selected item's information is passed to the system as an input.

Child Keys

default-source
optional
Defines specific behavior for what candidates are selectable if no text is entered in the search box
no-result-text
optional
Displays message to users if no results found
placeholder
optional
Placeholder text in search box
source
optional
Defines specific behavior for what candidates are selectable
type
optional
Defines the concept type of items being displayed