🙏 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!
The #1 destination for all things Jetpack Compose 🤖📱