
🙏 Supported by Emerge Tools
The platform for all your mobile performance needs
Autocomplete Text Field
Author: Kshitij Patil
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!