Fire dropdown callback on input

Dash Python
1

I want to know if it is possible to fire the dropdown callback as soon as a character is entered. Similar to the Input component. The dropdown is updated dynamically after a database query. I do not know the options in advance.

Regards,

2

I do a version of this, but I actually use the Input component combined with an html.Datalist component. The Datalist shows up as a list of options to select underneath the Input; you can make a callback that listens to input and suggests a list of options with a value to the user.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist

How to use it:

  • add an input component like html.Input(id='input',list='my-list')
  • add a datalist component like html.Datalist(id='my-list')
    • the children of this needs to be a list of html.Options like [html.Option('thing',value=thing),...]
  • add a function that listens to the input and sends a list of options to the children of the datalist

It’s not perfect but I find it works pretty well.

1 Like
3

That works, but I hate the style of the datalist options. It’s so 1995. You can’t style it. I think I will build my own component. I’ll share it here after.

Thanks,

4

Yeah you’re right. There was some topic on this forum where this was discussed but I can’t seem to find it. I’d love to see this component! Good luck.