SUBSCRIBE NOW

I always learn something just by skimming it that makes me want to bookmark the issue now and dig deeper later

SUBSCRIBE NOW

Keep up the good work with the newsletter 💪 I really enjoy it

SUBSCRIBE NOW

Dispatch is a must read for Android devs today and my go-to for keeping up with all things Jetpack Compose

SUBSCRIBE NOW

Dispatch has been my go-to resource as it's packed with useful information while being fun at the same time

SUBSCRIBE NOW

The content is light, fun, and still useful. I especially appreciate the small tips that are in each issue

SUBSCRIBE NOW

I truly love this newsletter ❤️‍🔥 Spot on content and I know there's a lot of effort that goes behind it

SUBSCRIBE NOW

Thanks for taking the time and energy to do it so well

JetpackCompose.app's Newsletter

I always learn something just by skimming it that makes me want to bookmark the issue now and dig deeper later

JetpackCompose.app's Newsletter

Keep up the good work with the newsletter 💪 I really enjoy it

JetpackCompose.app's Newsletter

Dispatch is a must read for Android devs today and my go-to for keeping up with all things Jetpack Compose

JetpackCompose.app's Newsletter

Dispatch has been my go-to resource as it's packed with useful information while being fun at the same time

JetpackCompose.app's Newsletter

The content is light, fun, and still useful. I especially appreciate the small tips that are in each issue

JetpackCompose.app's Newsletter

I truly love this newsletter ❤️‍🔥 Spot on content and I know there's a lot of effort that goes behind it

JetpackCompose.app's Newsletter

Thanks for taking the time and energy to do it so well

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()

view raw ComposeAutoCompleteTextField.kt hosted with ❤ by GitHub

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!

Get it now

The #1 destination for all things Jetpack Compose 🤖📱

Which Compose API?

Compare Frameworks

Compose Catalog

Compose Code Snippets

	@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()