SearchBox
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
: theSearcher
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
class MyActivity : AppCompatActivity() {
val searcher = HitsSearcher(
applicationID = ApplicationID("YourApplicationID"),
apiKey = APIKey("YourSearchOnlyAPIKey"),
indexName = IndexName("YourIndexName")
)
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 |
viewModel
|
type: SearchBoxViewModel
default: SearchBoxViewModel()
Optional
The business logic that handles new search inputs. |
searchMode
|
type: SearchMode
default: SearchMode.AsYouType
Optional
|
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. |
||
Copy
|
Compose UI
InstantSearch provides 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,
and create a 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.
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
30
31
32
33
34
35
36
37
38
39
class MyActivity : AppCompatActivity() {
val searcher = HitsSearcher(
applicationID = ApplicationID("YourApplicationID"),
apiKey = APIKey("YourSearchOnlyAPIKey"),
indexName = IndexName("YourIndexName")
)
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 {
TextField(
// set query as text value
value = searchBoxState.query,
// update text on value change
onValueChange = { searchBoxState.setText(it) },
// set ime action to "search"
keyboardOptions = KeyboardOptions(imeAction = ImeAction.Search),
// set text as query submit on search action
keyboardActions = KeyboardActions(
onSearch = { searchBoxState.setText(searchBoxState.query, true)}
)
)
}
searcher.searchAsync()
}
override fun onDestroy() {
super.onDestroy()
connections.disconnect()
searcher.cancel()
}
}