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.

Bixby Developer Center

Sample Graphs