Predicting text while typing on using Input Button

Dash Python
1

Hi everyone. I am building a dash which has an input button.
The input button is used to filter the data and subsequently change the dash graphs.
The values which are entered in the input button are Customer IDs (present in Excel)
Now I wish it to predict the text-
Like while typing the Cust ID, it should show the Cust IDs.
For example- on amazon while typing Tele- it predicts Television.

image
image1366×768 223 KB

The customer IDs are of 6 digits. let us say 12345 and 12453. So while one typed 12, it should show 12345 and 12453.

Here is my app layout-

app.layout = html.Div([dashboard,
                            html.Div(
                                dcc.Input(id='CustID', type='text')),
                                html.Button('Submit', id='button1'),
                                html.Div(id='output-tab'),
                           html.Div(id='tabs-content-example',style={'width':'100%','height':'100%'}),
                           html.Div(id='tabs-content-example1',style={'marginTop':'-210px','backgroundColor': '#E7E6E5','width':'100%','height':'50%'})                                          
                          ],style={'backgroundColor':  '#E7E6E5','position':'absolute','width':'100%','height':'120%'})

Is it possible to achieve this in Dash ? How to do this? Please help.

2

Have you tried out the drop down component? It has more or less that behavior by default.

\emher

3

Hi Emil. Yes i am aware of dropdown. Actually the purpose of the dash is something like while talking to the customer, the desk person can visualize his information. Also there are around 2000+ Cust IDs so it won’t be feasible to scroll through the entire IDs.

4

The drop down can easily handle a few thousand values. If you click the text field of the drop down and start typing, it will filter the values, so you don’t need to scroll through them.

1 Like
5

Yes I found the same on the forum.

Thanks Emil.