Search as you type drop-downs

[tofusoul]

Hi what would be the way to do a search as you type list item selector in Flet?

I am about to re-write an ui built in streamlit as the state is getting too complex to manage with what streamlit has to offer at the moment. Flet seems great, but there are no search ahead list selectors. I have to deal with a lot long lists and dropdowns will not quite do. There is the on_change attribute in the text input widget- but ideally that will need to generate a filtered list that is clickable like the streamlit widget. Is that tricky to do? Are there plans to have that as a standard widget in flet?

Thanks in advance.

[ghost]

you are on the right track. Use the Textfield on_change to trigger a function that sorts a list, e.g. controls inside of Column.controls with whatever logic you want. Example below.

def search(e, target: ft.Column):
    def keyword_search(i): #custom key function for .sort(); see below; i = item that is compared with search keyword
        compare_value= i.value.lower() # value of the item that will be compared to your input e.g. items are Text() controls
        if compare_value.startswith(e.data.lower()): # e.data = input of your Textfield. if the value of the item startswith your Textfield input
            result = "0" + compare_value # "0"+ to put your item on a lower index in list after sorting
            i.bgcolor = ft.colors.WHITE24 # change the bgcolor that item
        else: # if the item value does not start with your input
            result = compare_value
            i.bgcolor = '#1B1B1B'
        return result

    target.controls.sort(key=keyword_search)
    if e.control.value == '': #what to do if your Textfield input is empty
        for item in target.controls:
            item.bgcolor = '#1B1B1B'
    target.update()

then just add on_change=lambda e, t=target: search(e, t) while the target should be type list or any object with a list attribute, e.g. flet.Column since the controls attribute is a list.

[clueple]

Hi what would be the way to do a search as you type list item selector in Flet?

I am about to re-write an ui built in streamlit as the state is getting too complex to manage with what streamlit has to offer at the moment. Flet seems great, but there are no search ahead list selectors. I have to deal with a lot long lists and dropdowns will not quite do. There is the on_change attribute in the text input widget- but ideally that will need to generate a filtered list that is clickable like the streamlit widget. Is that tricky to do? Are there plans to have that as a standard widget in flet?

Thanks in advance.

I'd like have that searchable dropdown in Flet as well.
From the Flutter's official website, it says the 'dropdown' is searchable by default (e.g. type text in the dropdown text area and click to return the options that contain the typed text)

I did try the following code from Copilot.
It returns the TextField (e.g. text area that allows you to type, stored in variable, 'search_field')
and the resulting dropdown is in another widget, 'dropdown'.

Still figuring out how to 'enable text typing in the ft.Dropdown object '
Many thanks for any help.

import flet as ft

def main(page: ft.Page):
    def search(e):
        # Get the search query from the TextField
        search_query = e.control.value.lower()
        # Filter the dropdown options based on the search query
        filtered_options = [option for option in all_options if search_query in option.lower()]
        # Update the dropdown options
        dropdown.options = [ft.dropdown.Option(value) for value in filtered_options]
        page.update()

    # List of all options for the dropdown
    all_options = ["english", "German", "Canadian English", "Italiano"]

    # Create a TextField for entering the search text
    search_field = ft.TextField(label="Search", on_change=search)

    # Create a Dropdown to display the options
    dropdown = ft.Dropdown(options=[ft.dropdown.Option(value) for value in all_options])

    # Add the TextField and Dropdown to the page
    page.add(search_field, dropdown)

ft.app(target=main)

[ndonkoHenri]

Can the SearchBar not be of help? : https://flet.dev/docs/controls/searchbar

[clueple]

Thanks very much. I'm reading the documentation now. :)

[clueple]

Can the SearchBar not be of help? : https://flet.dev/docs/controls/searchbar

Searchbar does help.

With the help of Copilot, I created a class to perform 'search as you type on a ft.searchbar'

Here's the code (file available for download: https://github.com/clueple/pythonbeginner/blob/master/flet_searchbar_base.py):

from dataclasses import dataclass, field
import flet as ft
from flet import ListView, Page, ListTile, app, SearchBar, Text

@dataclass
class SearchableDropdown:
    items: list[str] = field(default_factory=list)
    lv: ListView = field(default_factory=ListView)
    search_bar: SearchBar = field(init=False)

    def __post_init__(self):
        self.search_bar = SearchBar(
            bar_hint_text="Type to search...",
            on_change=self.handle_change,
            controls=[self.lv]
        )
        self.populate_list_view()

    def populate_list_view(self):
        for item in self.items:
            self.lv.controls.append(ListTile(title=ft.Text(item), on_click=self.close_anchor, data=item))

    def handle_change(self, e):
        self.lv.controls.clear()
        search_query = e.control.value.lower()
        for item in self.items:
            if search_query in item.lower():
                self.lv.controls.append(ListTile(title=ft.Text(item), on_click=self.close_anchor, data=item))
        self.lv.update()

    def close_anchor(self, e):
        selected_item = e.control.data
        self.search_bar.close_view(selected_item)
        self.search_bar.update()

def main(page: Page):
    all_lang = ['English', 'Japanese', 'Cantonese', 'English Canadian']
    diff_list = ['abc','abcdef','def', 'xyz']
    searchable_dropdown = SearchableDropdown(all_lang)
    new_dropdown = SearchableDropdown(diff_list)

    page.add(
        searchable_dropdown.search_bar,
        new_dropdown.search_bar
        )

if __name__ == '__main__':
    app(target=main

This is how I tweak the code above for app development:
https://www.youtube.com/watch?v=qIri5cnfv5A