dcc.Input Auto Complete Issues and looking for tips and tricks

Dash Python
,
1

Hi, I am trying to create an dcc.Input or dbc.Input that has an autocomplete, I want the autocomplete to select from a list. I have added a list under html.Datalist(id=‘vars’, children=vars_, hidden=‘hidden’) where vars_ from children = vars_ is just a python list of strings for example [‘item1’, ‘item2’, ‘item3’, …]. I would like the autocomplete to select from this list but for some reason it is not working. Also, if possible I would like the user to be able to type item1, and then for item2 it brings up the same auto complete list ignoring the text before the comma. This isnt a must have, at this point I would be happy with just get the autocomplete working as it should. I have tried using a drop down but I want to be able to select the same item multiple times and the items will have a little bit of variation from what is in the list. Below is the code for the dcc.Input.

Also, If anyone knows of a good place I could find examples of components using all the different arguments that would be very helpful. A lot of the arguments say ( string ; optional) but don’t give examples of what a valid string or input would be.

dbc.InputGroup([ dcc.Input(id=‘parameter’, type=‘list’, autoComplete=True,list=‘vars’, autoFocus=True),
html.Datalist(id=‘vars’, children=vars_, hidden=‘hidden’)], size=“md”)

Thank you in advanced for any help!

2

I figured out my problem for the list argument in dcc.Input. I just need to use this [html.Option(value=word) for word in vars_] to create an option for every list item. Now my question is how to select an item from auto complete and then add a comma and the auto complete restarting from the text after the comma. For example: autocompletelist = [‘Apple’, ‘Grape’, ‘Watermelon’] in input box type Apple, Gr and have the autocomplete show Grapes for the text Gr. Does anyone know if this is possible?