Bixby Developer Center

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.

This component does not work well with hands-free mode, because users can't input the search field nor can they navigate the autocomplete suggestions with voice.

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 master on GitHub

You can run the sample capsule in the Simulator to see how this component displays on different devices, if supported.

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