QSelect Filtering

[hochwe]

Hi, I've been struggling to get filtering to work in a dropdown menu. Essentially, I want to create something like the 2nd dropdown menu here. I've been using QSelect to try to get this to work, but perhaps there is better way.

So far, I've been able to get the dropdown to display the values I want, and I'm able to click and select them. However, when I use the 'filter' event to try to update the values in the dropdown, the dropdown no longer populates. Instead, I get a spinning icon.

Here is my code:

import justpy as jp

dropdown_items = [123, 456, 789]

def filter_event(self, msg):
    # For testing purposes, just update the list of items in the dropdown to what was typed into dropdown
    new_items = [msg.value]
    self.options = new_items

def filter_test(request):
    wp = jp.QuasarPage(dark=True, tailwind=True, title="Filter Test Page")
    d1 = jp.QDiv(text="Select a number", classes="q-pa-md text-xl", style="max-width: 600px", a=wp)

    dropdown = jp.QSelect(label="Test dropdown", options=dropdown_items, multiple=True, use_input=True, clearable=True, use_chips=True, padding=True, bordered=True, a=d1)
    dropdown.on('filter', filter_event)

    return wp

jp.justpy(filter_test)

I don't know how to use asynchronous code in Python, so I wonder if that has something to do with my issues.

Thank you in advanced for any help or tips!

[hochwe]

I ended up solving this myself. I found #146 which explained how it should be implemented. Notably, I should have been using the "keyup" event, rather than the "filter" event.

class QSelectWithFilter(jp.QSelect):

	def __init__(self, **kwargs):
		super().__init__(**kwargs)
		self.options = kwargs.get('options', [])
		self.initial_options = kwargs.get('options', [])
		self.use_input = True
		self.allowed_events = ['input', 'remove', 'add', 'new_value', 'filter', 'filter_abort', 'keyup', 'focus',
		                       'blur']
		self.on('keyup', self.filter_function)
		self.on('blur', self.reset)
		self.on('input', self.reset)

	def reset(self, msg):
		self.options = self.initial_options

	def filter_function(self, msg):
		self.options = list(filter(lambda x: msg.value.lower() in str(x).lower(), self.initial_options))


def filter_test(request):
    dropdown_items = [123, 456, 789]
    wp = jp.QuasarPage(dark=True, tailwind=True, title="Filter Test Page")
    d1 = jp.QDiv(text="Select a number", classes="q-pa-md text-xl", style="max-width: 600px", a=wp)

    dropdown = QSelectWithFilter(label="Test dropdown", options=dropdown_items, multiple=True, use_input=True, clearable=True, use_chips=True, padding=True, bordered=True, a=d1)

    return wp