Enhances dropdown menus with search functionality, allowing dynamic filtering of list items. Supports easy customization of placeholders, default selections, and callback handling for item selection.
Compose Searchable Dropdown is a Jetpack Compose library for Android that provides a dropdown with a search bar.
Compose Searchable Dropdown is available on mavenCentral().
implementation("io.github.the-best-is-best:ComposeSearchableDropdown:2.3.0")
upgrade kotlin version to 2.1.20 and compose to 1.8.0
support multi-selection
kotlin.native.cacheKind = none
compose.kotlin.native.manageCacheKind = false
searchIn parameter can now be null (if null the search bar will be hidden) selectedItemsState.clear()
listOfItems add your list dataplaceholder add your placeholder for text fieldsearchPlaceHolder add your placeholder for search fielddefaultItem add your default itemonDropDownItemSelected add your callback when item selected and receive item selecteddropdownItem add your item view like it.name or any thing will display in search dropdownselectedOptionTextDisplay add your item view like it.name or any thing will display in text fieldsearchIn add your item like it.name or any thing will search in itdata class ExampleData(
val id: Int,
val name: String
)
private val data = listOf(
ExampleData(1, "First"),
ExampleData(2, "Second"),
ExampleData(3, "Third"),
ExampleData(4, "Fourth"),
ExampleData(5, "Fifth"),
)
val selectedItemsState = rememberDropdownStates<ExampleData>(value = data[2])
Column{
SearchableDropDown(
listOfItems = data,
state = selectedItemsState,
placeholder = {
Text(text = "اختار")
},
searchPlaceHolder = {
Text(text = "بحث")
},
onDropDownItemSelected = {
Log.d("get v", it.name)
},
dropdownItem = {
Text("${it.id} - ${it.name}", fontSize = 20.sp)
},
selectedOptionTextDisplay = {it.name},
searchIn = {
it.name
}
)
}
fun MultiSelectExample() {
data class ExampleData(
val id: Int,
val name: String
)
val data = List(1000) { index ->
ExampleData(index + 1, "Item ${index + 1}")
}
val multiState = rememberMultiDropdownState<ExampleData>()
MaterialTheme(
colorScheme = lightColorScheme()
) {
Column(
modifier = Modifier.fillMaxSize().padding(16.dp),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
MultiSearchableDropDown(
listOfItems = data,
state = multiState,
placeholder = { Text("اختر عدة عناصر") },
searchPlaceHolder = { Text("بحث...") },
showClearButton = true,
openedIconColor = Color.Blue,
closedIconColor = Color.Gray,
onSelectionChanged = {
println("Selected Items: ${it.map { it.name }}")
},
selectedOptionTextDisplay = { selectedSet ->
if (selectedSet.isEmpty()) "لم يتم الاختيار"
else selectedSet.joinToString(", ") { it.name }
},
dropdownItem = { item, isSelected ->
Row(
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier.fillMaxWidth()
) {
Icon(
imageVector = if (isSelected) Icons.Outlined.CheckBox else Icons.Outlined.CheckBoxOutlineBlank,
contentDescription = null,
tint = if (isSelected) Color.Green else Color.Gray
)
Spacer(modifier = Modifier.width(8.dp))
Text(text = "${item.id} - ${item.name}", fontSize = 18.sp)
}
},
searchIn = { it.name }
)
}
}
}
data class ExampleData(
val id: Int,
val name: String
)
private val data = listOf(
ExampleData(1, "First"),
ExampleData(2, "Second"),
ExampleData(3, "Third"),
ExampleData(4, "Fourth"),
ExampleData(5, "Fifth"),
)
SearchableDropDown(
listOfItems = data,
placeholder = {
Text(text = "Select an item")
},
searchPlaceHolder = {
Text(text = "Search an item")
},
defaultItem = data[2],
onDropDownItemSelected = {
Log.d("get v", it.name)
},
dropdownItem = {
Text("${it.id} - ${it.name}")
},
selectedOptionTextDisplay = {it.name},
searchIn = {it.name} // or it.id
)
Surfaced from shared tags and platforms — no rankings paid for.