API Reference / Android Widgets / SearchBox
Widget signature
SearchBoxConnector(
  searcher: Searcher
  viewModel: SearchBoxViewModel
  searchMode: SearchMode
  debouncer: Debouncer
)

About this widget

The SearchBox is used to perform a text-based query.

To add a SearchBox to your search experience, use these components:

  • Searcher: The Searcher that handles your searches.
  • SearchBoxViewModel: The business logic that handles new search inputs.
  • SearchBoxView: The view that handles the input.

Examples

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
class MyActivity : AppCompatActivity() {
    val client = ClientSearch(
        ApplicationID("YourApplicationID"),
        APIKey("YourAPIKey")
    )
    val index = client.initIndex(IndexName("YourIndexName"))
    val searcher = SearcherSingleIndex(index)
    val searchBox = SearchBoxConnector(searcher)
    val connection = ConnectionHandler(searchBox)

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val searchView = SearchView(this)
        val view: SearchBoxView = SearchBoxViewAppCompat(searchView)
        connection += searchBox.connectView(view)
        searcher.searchAsync()
    }

    override fun onDestroy() {
        super.onDestroy()
        connection.disconnect()
        searcher.cancel()
    }
}

Parameters

searcher
type: Searcher
Required

The Searcher that handles your searches.

viewModel
type: SearchBoxViewModel
default: SearchBoxViewModel()
Optional

The business logic that handles new search inputs.

searchMode
type: SearchMode
default: SearchMode.AsYouType
Optional
  • SearchMode.AsYouType triggers a search on each keystroke.
  • SearchMode.OnSubmit trigger a search on submitting the query.
debouncer
type: Debouncer
default: Debouncer(debounceLoadingInMillis)
Optional

Delays searcher operations by a specified time duration.

View

searchBoxView
type: SearchBoxView
Required

The view that handles the input.

1
2
3
val searchView = SearchView(this)
val view: SearchBoxView = SearchBoxViewAppCompat(searchView)
searchBox.connectView(view)

Compose UI

InstantSearch provides the SearchBox composable, which you can embed in your views. It uses SearchBoxState as a state model, which is an implementation of the SearchBoxView interface. You need to connect SearchBoxState to the SearchBoxConnector or SearchBoxViewModel like any other SearchBoxView implementation.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
class MyActivity : AppCompatActivity() {
    val client = ClientSearch(
        ApplicationID("YourApplicationID"),
        APIKey("YourAPIKey")
    )
    val index = client.initIndex(IndexName("YourIndexName"))
    val searcher = SearcherSingleIndex(index)
    val searchBoxState = SearchBoxState()
    val searchBox = SearchBoxConnector(searcher)
    val connections = ConnectionHandler(searchBox)

    init {
        connections += searchBox.connectView(searchBoxState)
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            SearchBox(searchBoxState = searchBoxState)
        }
        searcher.searchAsync()
    }

    override fun onDestroy() {
        super.onDestroy()
        connections.disconnect()
        searcher.cancel()
    }
}

If you want to create a custom Compose UI view that handles the query input, you can directly use the SearchBoxState as a state model. It provides the query property along with the setText function to streamline the design process of your custom Compose UI view.

Did you find this page helpful?