Auto complete/text suggestion option in textfield

Dash Python
1

Hi,
I could not find an example that shows how I can give auto complete or text suggestion option in a texfield. I mean if a user start writing in a text filed then it should show suggestion based on a list of text in the background. Is it still possible using dash?

1 Like
2

i’d suggest using a drop down menu instead, which looks up based on a list or a dictionary.

Here is an example Chris highlighted in the past

1 Like
3

@lanreogun Thank you for your suggestion. I know about this feature of drop down menu. However, it limits the user to choose only within the items in the list/dictionary. My intention is the help the user to write the search key. I would like to show a set of options when the user typing, but not limiting to those options. So the user can write anything whether it is in the list or not. After clicking a button, I want to process the user input.

1 Like
4

I’m working on making such a thing as a custom component.

4 Likes
5

Any progress on this or do you need some help?

6

Hello - I’m also very interested in having this functionality!

1 Like
7

I think this is the point of the Datalist + Options components:

suggestions = ["valid", "options", "as", "suggestions"]; # generated by, i.e. query to db

html.Datalist(
    id='list-suggested-inputs', 
    children=[html.Option(value=word) for word in suggestions])

Then, reference the options within your input.

dcc.Input(id='input-1',
    type='text',
    list='list-suggested-inputs',
    value=''
),

You can type into the Input component and a list of Options will be shown that match the typed text. I haven’t tested this using more than a few hundred options. Alternatively, you could look at a client-side implementation now that js callbacks are a thing.

4 Likes
8

Hi everyone,

About a year ago I mentioned that I was working on this and I finally got around to finishing it. This is essentially a wrapped React-Autosuggest component with Elasticsearch integration built in.

The Elasticsearch configuration for your index can be set up following this tutorial:

Please don’t hesitate to let me know if you see any issues or have any questions.

P.S. Shout out to @mkhorton for the help on this!

5 Likes
9

Unfortunately I have not had time to write proper tests or documentation for this, which will come later (busy PhD student life). If Plotly is interested in merging something like this into DCC or something like that, I can prioritize it.

10

thanks for this brad, the approach makes perfect sense when would the html.Datalist() need to live in relation to the dcc.Input, outside of the app.Layout, I assume?

11

@jezlax As with other html.* components, html.datalist is just a wrapper around the actual HTML5 datalist Tag. I don’t believe order within your page should matter. You can include it in the layout… it shouldn’t matter where within layout (go at the top, bottom, etc).

12

@jdagdelen any luck finding someone to turn this into a dcc? Perhaps worth sharing as a FR in the dash repo if you haven’t already.

13

Is there a way to style the list of dropdown suggestions (eg. change font size, colour etc)?

14

Hi That’s so cool to hear. Actually I have written a script to conduct the search so I don’t want to connect ES at the backend. Can you suggest a solution in that case. I am new to dash so any support will be appreciated.

15

Hi all,

how do you incorporate this into a dash app DataTable?