Search code examples
android-roomandroid-jetpack-composelazycolumn

Jetpack Compose - How to search and display specific data from room in LazyColumn?


I want to fetch data from room table using a search query and present the result in LazyColumn instead of the someList I present there.

In other words, how to implement search function using compose from room table?

//Getting the list from room and presenting it in lazy column

val someList by mainViewModel.getSomeItems.collectAsState(initial = emptyList())


LazyColumn(
 verticalArrangement = Arrangement.spacedBy(8.dp),
  modifier = Modifier
   .fillMaxSize()
    .padding(16.dp)
                        ) {
                            
itemsIndexed(items = someList) { itemIndex, item ->


//not really important to the question
item.currentInventory?.let {

MainScreenItemRow(
itemId = item.id,
itemNumber = item.itemNumber,
itemDescription = item.itemDescription,
currentInventory = it,
)
             }
         }
     }
} // end of lazy

I want to use DAO query and present the result list if query matches to one of the items in "someList".

@Query("SELECT * from someList WHERE id LIKE :search OR itemNumber LIKE :search OR itemDescription LIKE :search")
    fun searchInventory (search: String): Flow<List<SomeList>>

How can I insert the query results into a list and present it in lazy column?


Solution

  • Leaving my updated code for people who might need it. Didn't use DAO or anything like that, just filtering the main list with some adjustments:

    SearchView:

    
    @Composable
    fun SearchView(
        modifier: Modifier = Modifier,
        state: MutableState<TextFieldValue>,
        placeHolder: String
        ) {
    
        TextField(
            value = state.value,
            onValueChange = { value ->
                state.value = value
            )
    
    }
    

    Main Screen that presents final list

    val textState = remember { mutableStateOf(TextFieldValue("")) }
    
    //Place the composable SearchView wherever is needed
    
    SearchView(state = textState, placeHolder = "")
    
    val searchedText = textState.value.text
    
    

    LazyColumn showing main list and if something entered in searchedText, the list updates only with the searched items.

    *Changed from itemsIndexed to items with key as item.id because after the list was updated according to the search, the index was reset so couldn't control my items in the same way.

    LazyColumn() {
    
                 items(items = inventoryList.filter {
                 it.itemNumber.contains(searchedText, ignoreCase = true) ||
                 it.itemDescription.contains(searchedText, ignoreCase = true)
        }, key = {it.id}) { item ->
    
                                        MainScreenItemRow(
                                            itemNumber = item.itemNumber,
                                            itemDescription = item.itemDescription,
                                         
                                        )
                                    }
                                }
                            }