Show dropdown / autocomplete in ui.select after a minimum length of characters

[nkonts]

First Check

• I added a very descriptive title here.
• I have checked the FAQs for a similar question and didn't find it.
• I used the GitHub search to find a similar question and didn't find it.
• I searched the NiceGUI documentation, with the integrated search.
• I already searched online "How to X in NiceGUI" and didn't find any information.

Example Code

"""Widgets used in the search page."""
from dataclasses import field
from typing import List
import itertools
import string
from nicegui.observables import ObservableList
from nicegui import ui, app, binding


@binding.bindable_dataclass
class SearchState():
    """Holds the state specific to the search page."""

    is_searching: bool = False
    queries: ObservableList[str] = field(default_factory=ObservableList)
    
        
class SearchUI:
    
    def __init__(self):
        self.state = SearchState()
        self.validation ={
            'Length >= 3': lambda value: all(len(v.strip()) >= 3 for v in value)
        }

    @ui.refreshable
    def add_search_bar_as_chips(self, options: List[str]) -> ui.input_chips:
        with ui.row().classes('w-full h-full justify-center p-4'):
            search_bar = ui.input_chips(
                label="Search with keywords...",
                validation=self.validation
            ).props('clearable rounded outlined dense') \
            .classes('w-full max-w-2xl') \
            .bind_value(self.state, 'queries') 
            
            with search_bar.add_slot('prepend'):
                ui.icon('search', color='primary')
                
            return search_bar
        
    @ui.refreshable
    def add_search_bar_as_select(self, options: List[str]) -> ui.select:
        """
        Create a search input styled as chips but with a dropdown for autocompletion.
        """
        with ui.row().classes('w-full h-full justify-center p-4'):
            # Build ui.select as a ui.input_chips. 
            # We do this to enable filtering with the dropdown of ui.select.
            # Reference how ui.input_chips is built:
            # https://github.com/zauberzeug/nicegui/blob/main/nicegui/elements/input_chips.py#L44
            # Note that some of its props are arguments to ui.select. Others have to be set with .props()
            #
            # 1.st .prop(): Missing props to make it ui.input_chips
            # 2.nd .prop(): Styling props
            search_bar = ui.select(
                label="Search with keywords...",
                options=options, 
                multiple=True,  new_value_mode="add-unique",
                validation=self.validation,
                # Parameter with_input=True enables the following props: use-input, fill-input, input-debounce-0
                # Reference: https://github.com/zauberzeug/nicegui/blob/main/nicegui/elements/select.py#L73
                with_input=True, 
            ).props('use-chips hide-dropdown-icon clearable') \
            .props('rounded outlined dense') \
            .classes('w-full max-w-2xl') \
            .bind_value(self.state, 'queries') 
  
            with search_bar.add_slot('prepend'):
                ui.icon('search', color='primary')
                
            return search_bar
            
    async def perform_search(self) -> None:
        pass
    
    
@ui.page('/')
def page():
    search = SearchUI()
    
    n = 3
    options = [
        f"{''.join(letters)} {i}"
        for letters in itertools.product(string.ascii_uppercase, repeat=3)
        for i in range(1, n+1)
    ]
    ui.label(f"{len(options)=}")
    search.add_search_bar_as_chips(options=options)
    search.add_search_bar_as_select(options=options)
    
    
ui.run(reload=True)

Description

I am building a search widget for my application that uses keywords to then build a query to retrieve the results. I I like the idea of ui.input_chips and wanted to use that at first (SearchUI.add_search_bar_as_chips).

Since I have an index anyway I thought that it's very useful for my users to have an autocomplete function. I replicated the look of ui.input_chips with the according props to make ui.select behave similar.

The issue I run into:
My selection of possible keywords is very large. It both makes the website slow using a large list but I also dislike having a very large dropdown menu. I was looking for props to adjust the size of the dropdown and was looking at the virtual-scroll props but it seems like I was misunderstanding them.

The quasar select documentation shows an example of a behaviour I am looking for at Filtering and autocomplete -> Filtering on more than 2 chars. Is there a way to achieve something similar to that to reduce the length of listed items in the ui.select dropdown?

Do you have another suggestions to create something similar with other elements? I am considering adapting NiceGUI's search.py.

NiceGUI Version

3.0.3

Python Version

3.12.10

Browser

Chrome

Operating System

Windows

Additional Context

No response

[BaccanoMob]

You tried updating options rather than setting all at once?

Ref: https://nicegui.io/documentation/select#update_options

Use .on("input-value", lambda e: update_dropdown(e.args)). Important points on Update dropdown:

1. It should use next or for loop with break to get the first n suggestions. Or something similar that doesn't do a full unnecessary loop.
2. before you update the options you must append/extend the previous selected values. Otherwise I believe the selection may be lost.

You could also use the filter on event but I think it will require JS code to handle filters. I don't know how to use virtual scroll, though i believe it may require JS as well. Above is prolly the most Pythonic way to achieve what you want.