EmergeTools logo
🙏 Supported by Emerge Tools
The platform for all your mobile performance needs

Autocomplete Text Field

An AutoCompleteTextView implementation in Jetpack Compose

@Composable
fun AutoCompleteTextField(
initialText: String,
itemList: List<String>,
onQuery: (String) -> Unit,
onClearResults: () -> Unit,
modifier: Modifier = Modifier
) {
val (field, changeField) = savedInstanceState(saver = TextFieldValue.Saver) { TextFieldValue(text = initialText) }
LaunchedEffect(subject = field.text) {
if (!field.isBlank()) {
delay(1000L)
onQuery(field.text.trim())
}
}
LazyColumn(modifier = modifier.animateContentSize()) {
item {
TextField(
value = field,
onValueChange = {
changeField(it)
onClearResults()
},
maxLines = 1
)
}
if (itemList.isNotEmpty() && !field.isBlank()) {
items(itemList) { item ->
Text(
item,
modifier = Modifier
.padding(4.dp)
.clickable(onClick = {
changeField(TextFieldValue(item))
})
)
}
}
}
}
fun TextFieldValue.isBlank() = this.text.isBlank()

Have a project you'd like to submit? Fill this form, will ya!

If you like this snippet, you might also like:

Maker OS is an all-in-one productivity system for developers

I built Maker OS to track, manage & organize my life. Now you can do it too!