How to change the behavior of the filter function of ui.select

[gtato]

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

from nicegui import ui

ui.select(label="test", options=["a_service", "b_service", "c_service", "service"])

ui.run()

Description

Currently when typing on a ui.select the values of the options are filtered, but the filter organizes the results in an alphabetic order. In some cases this is not very convenient because you could type a full matching value, and still have to scroll through the options that contain that value, but are not a full match.

In the example above, typing service would still show the service option as the last element even though it is a full match. Is there a way to update the filtering function with a custom one?
Ideally it should be updated with something that orders according to some distance from the keyword.

NiceGUI Version

3.0.2

Python Version

3.10.15

Browser

Chrome

Operating System

Linux

Additional Context

No response

[falkoschindler]

Hi @gtato,

This is a bit tricky, because the filter function is implemented in JavaScript and not meant to be replaced:
https://github.com/evnchn/nicegui/blob/230983fd92b5eb0183653b8e1a69351a4d8fb123/nicegui/elements/select.js#L26-L32

But with some custom JavaScript we can monkey patch it:

@ui.page('/')
def main_page():
    select = ui.select(['a_service', 'b_service', 'c_service', 'service'], with_input=True)
    ui.run_javascript(f'''
        const select = getElement({select.id});
        select.findFilteredOptions = function() {{
            const needle = this.$el.querySelector("input[type=search]")?.value.toLocaleLowerCase();
            return this.initialOptions.filter((v) => String(v.label).toLocaleLowerCase().startsWith(needle));
        }}
    ''')

As a simple example, this function uses startsWith instead of indexOf.

[gtato]

that's actually very cool, thanks!