Problem with Input and Datalist with Pattern Matching Callback

Hello,

I’m trying to build an app where a user can select a set of options (from a dropdown), and I’d like to dynamically a html.Div element with an input and a Datalist for each of them.

So a pattern matching callback for the Datalist on a user starting to type, and generate a list of suggestion from an api call.

For that I would need to pass the element ID as an input for the Datalist element, but somehow I cannot do it, as I think the id for the list needs to be a string.

So, something like this

  
listx = ['item1', 'item2', 'item3']
  test_tab = dcc.Tab(
      label='Test tab', 
      children=[
          html.Div([
              dbc.InputGroup([       
                  dbc.InputGroupText(x),
                  dcc.Input(
                      id={
                          'type': 'test',
                          'index': x
                      },
                      type='text',
                      placeholder=x,
                      list={
                          'type': 'test-list',
                          'index': x
                      },
                  )
              ]),
              html.Datalist(
                  id={
                          'type': 'test-list',
                          'index': x
                      },
                  children=[]
              )
          ]) for x in listx 
      ]
  )

And the callback (ideally matching) would fill the datalist items.


@app.callback(
    Output({'type': 'test-list', 'index': MATCH}, 'children')
    Input({'type': 'test', 'index': MATCH}, 'value'),
)
def test_suggest_locs(x):
    return ([html.Option(value=item) for item in myAPIcall(x)]

Eventually, I could create all the datalists in advance (as I have the list), but it is a nightmare to deal with inputs that might not yet exist with the flexible callback signatures, like this.

Best regards,

Daniele

Hello @daniele,

On your callback, it looks like you have a syntax error and have a leading ‘(’.

Question, why are you using this as opposed to a dcc.Dropdown?

Hi jinnizor,

Yes, sorry, I wrote it down as an example without testing it.

My understanding is that a dcc.Dropdown would be the one to use for a given, hardcoded list of elements that changes rarely, but the search element gets updated every time the dcc.Input value changes, and the pool for that is too large and variable for that – e.g. 1000s of items to sort – , which is the reason for the API call to get 10 to populate suggestions.

Daniele

Since you are using an api to pull it, you can update the dcc.Drop-down options on input value change.

Hi,

I tried what you suggest, and it easily does what I require. I misunderstood the Dropdown strengths.

Thank you for your help!

Daniele

1 Like