Skip to content

Updating SearchBar.controls doesn't trigger it's rebuild #2874

@kXborg

Description

@kXborg

The example of SearchBar provided in the documentation opens a static dropdown. As it apparent from the controls that ListTile titles are obtained using a loop.

            ft.ListTile(title=ft.Text(f"Color {i}"), on_click=close_anchor, data=i)
            for i in range(10)
        ]

I am not very clear about the use of for loop inside controls. Can't find any syntax in the documentation.

I want the dropdown list to change based on text entered in the text filed. My approach was to update the ListTile controls during on_change event. However, not sure how to access the items in a loop and update the controls. My code is attached below. Please help.

from flet import *
import asyncio 

class SearchApp(UserControl):
    def __init__(self):
        self.get_data = [
            "design 1",
            "design 2",
            "design 3",
            "design 4",
            "design 5"
        ]
        self.control_list = {}
        self.filtered_list = []
        super().__init__()
    
    async def filter_table(self, e):
        self.filtered_list = []
        entered_text = self.control_list["search"].content.controls[0].value
        for i in self.get_data:
            if entered_text.lower() in i.lower() and i != "":
                self.filtered_list.append(i)
        # Update the TextButton here. Not sure how to do.
        self.control_list["search"].content.controls[0].update()
        print(self.filtered_list)
    
    def search_ui(self):
        _obj = Container(
            bgcolor="white10",
            border_radius=10,
            height=50,
            padding=10,
            content=Row(
                controls=[
                    SearchBar(
                        height=50,
                        on_change=lambda e: asyncio.run(self.filter_table(e)),
                        controls=[
                            TextButton(
                                text=item, 
                                on_click=lambda e: print(item), 
                                data=item
                            )
                            for item in self.filtered_list
                        ]
                    )
                ]
            )
        )

        self.control_list["search"] = _obj
        return _obj
    
    def build(self):
        return Column(
            controls=[
                self.search_ui()
            ]
        )

def main(page: Page):
    page.window_width=500
    page.horizontal_alignment = "center"
    page.vertical_alignment = "top"
    page.add(
        SearchApp(),
    )
    page.update()


if __name__ == "__main__":
    app(target=main)

You will notice that, my filtered list is being generated as expected. However, I am not able to update the SearchBar controls.

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

Status

✅ Done

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions