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!