How create a dynamic search results in a html list using dash/python, live results without submit botton

I am trying to create a dynamic search-box that allows doing research and auto-completion. I would like that when I type in a search box without pushing a button I have an HTML.Div with results. Exactly how it works in the yahoo finance search box. I am trying it but I have no good results, first it is very slow and it works just when I click the pointer outside the search box, so it is not live, second, gives me back just the last result. Instead, I need all the results to pop-up in an HTML div and not in a dropbox. I tried to do this:

 app.layout = html.Div([
        dcc.Input(id='username', value='', type='text'),
        #html.Button(id='submit-button', type='submit', children='Submit'),
        html.Div(id='output_div')
    ])

    @app.callback(Output('output_div', 'children'),
                  [Input('username', 'value')],
                  )
    def update_output(input_value):
            print('iniziale:')
            print(input_value)
            list_a = [input_value]
            list_b = [" ", "a", "b", "c", "d", "e", "f", "g", "h", "i", "l", "m", "n", "o", "p", "q", "r", "s", "t", "v", "z",
            "ü", "ä", "ö", "y", "w", "x"]
            list_c = [f"{i} {j}" for i in list_a for j in list_b]
            for x in list_c:
                apiurl = "https://query1.finance.yahoo.com/v1/finance/search?q="+x+"&quotesCount=6&quotesQueryId=tss_match_phrase_query&multiQuoteQueryId=multi_quote_single_token_query&enableNavLinks=true&enableEnhancedTrivialQuery=true"
                r = requests.get(apiurl)
                data = r.json()
                if data['quotes']:
                    longname = data["quotes"][0]["longname"],
                    print(longname)
            return longname
        #[html.Div(children=f'Div #{i}') for i in range (len(longname))]

how to do this? I am trying and trying but without results. Some help?

ok let suppose this is my json data:

{"explains":[],"count":15,"quotes":[{"exchange":"NMS","shortname":"Tesla, Inc.","quoteType":"EQUITY","symbol":"TSLA","index":"quotes","score":596601.0,"typeDisp":"Equity","longname":"Tesla, Inc.","isYahooFinance":true},{"exchange":"MEX","shortname":"TESLA INC","quoteType":"EQUITY","symbol":"TSLA.MX","index":"quotes","score":20404.0,"typeDisp":"Equity","longname":"Tesla, Inc.","isYahooFinance":true},{"exchange":"GER","shortname":"TESLA INC. DL -,001","quoteType":"EQUITY","symbol":"TL0.DE","index":"quotes","score":20348.0,"typeDisp":"Equity","longname":"Tesla, Inc.","isYahooFinance":true},{"exchange":"FRA","shortname":"TESLA INC. DL -,001","quoteType":"EQUITY","symbol":"TL0.F","index":"quotes","score":20183.0,"typeDisp":"Equity","longname":"Tesla, Inc.","isYahooFinance":true},{"exchange":"BUE","shortname":"TESLA INC","quoteType":"EQUITY","symbol":"TSLA.BA","index":"quotes","score":20124.0,"typeDisp":"Equity","longname":"Tesla, Inc.","isYahooFinance":true},{"exchange":"PNK","shortname":"TESLA EXPLORATION LTD","quoteType":"EQUITY","symbol":"TXLZF","index":"quotes","score":20059.0,"typeDisp":"Equity","longname":"Tesla Exploration Ltd.","isYahooFinance":true},{"exchange":"LSE","shortname":"GRANITESHARES FINANCIAL PLC GRA","quoteType":"EQUITY","symbol":"3STS.L","index":"quotes","score":20048.0,"typeDisp":"Equity","longname":"GraniteShares 3x Short Tesla Daily ETP","isYahooFinance":true}],"news":[{"uuid":"9caaa590-b553-3f46-a676-52d7a022efa0","title":"Dow Jones Futures: Stock Market Rally Flashes Mixed Signals; Why Apple, Nio, Zoom Video Are Important","publisher":"Investor's Business Daily","link":"https://finance.yahoo.com/m/9caaa590-b553-3f46-a676-52d7a022efa0/dow-jones-futures%3A-stock.html","providerPublishTime":1606680130,"type":"STORY"},{"uuid":"289ae8b8-6afe-3cf8-b184-077681ed3270","title":"ETFs for the Driverless Car Revolution","publisher":"Investopedia","link":"https://finance.yahoo.com/m/289ae8b8-6afe-3cf8-b184-077681ed3270/etfs-for-the-driverless-car.html","providerPublishTime":1606675634,"type":"STORY"},{"uuid":"bdaea0b0-a8c6-3fac-b597-f1d061f79cf8","title":"Tesla To Spend $6.4M On New Supercharger Factory In China","publisher":"Benzinga","link":"https://finance.yahoo.com/news/tesla-spend-6-4m-supercharger-172329678.html","providerPublishTime":1606670609,"type":"STORY"},{"uuid":"d8c6cf8f-cddf-3c88-93b5-5305f1b4ca48","title":"The Only Electric Car Stock Worth Buying","publisher":"Motley Fool","link":"https://finance.yahoo.com/m/d8c6cf8f-cddf-3c88-93b5-5305f1b4ca48/the-only-electric-car-stock.html","providerPublishTime":1606662000,"type":"STORY"},{"uuid":"b3419178-c811-378e-9106-a150c40ec31c","title":"Here's What All Investors Should Know About Shorting Stocks","publisher":"Motley Fool","link":"https://finance.yahoo.com/m/b3419178-c811-378e-9106-a150c40ec31c/here%27s-what-all-investors.html","providerPublishTime":1606651980,"type":"STORY"},{"uuid":"39fb680c-12ab-3ef0-a792-efc1d8fafb90","title":"The 3 Most Dangerous Investing Bubbles Waiting to Burst","publisher":"Motley Fool","link":"https://finance.yahoo.com/m/39fb680c-12ab-3ef0-a792-efc1d8fafb90/the-3-most-dangerous.html","providerPublishTime":1606649760,"type":"STORY"},{"uuid":"4d224e7e-59c9-37df-b841-9a47989fc6b6","title":"Top 11 Lithium and Battery Stocks to Buy Now","publisher":"Insider Monkey","link":"https://finance.yahoo.com/news/top-11-lithium-battery-stocks-031442126.html","providerPublishTime":1606619682,"type":"STORY"},{"uuid":"f4d2a6f4-d714-381d-97a9-0df84828885f","title":"Stock Market Today: Nasdaq Notches Another High as COVID's Spread Worsens","publisher":"Kiplinger","link":"https://finance.yahoo.com/news/stock-market-today-nasdaq-notches-182341710.html","providerPublishTime":1606610750,"type":"STORY"}],"nav":[],"lists":[],"researchReports":[],"totalTime":28,"timeTakenForQuotes":410,"timeTakenForNews":700,"timeTakenForAlgowatchlist":400,"timeTakenForPredefinedScreener":400,"timeTakenForCrunchbase":0,"timeTakenForNav":400,"timeTakenForResearchReports":0}

Now I use an input box (search box) to get these results/auto-compete suggestions. how can I create a search box that gives me an HTML table with all these results?

Answer

I’m not sure what this is supposed to do:

list_a = [input_value]
list_b = [" ", "a", "b", "c", "d", "e", "f", "g", "h", "i", "l", "m", "n", "o", "p",     "q", "r", "s", "t", "v", "z",
          "ü", "ä", "ö", "y", "w", "x"]
list_c = [f"{i} {j}" for i in list_a for j in list_b]

but I’m not sure it’s what you want. When I enter the text “hello”, the values in list_c are:

['hello  ', 'hello a', 'hello b', 'hello c', 'hello d', 'hello e', 'hello f', 'h
ello g', 'hello h', 'hello i', 'hello l', 'hello m', 'hello n', 'hello o', 'hell
o p', 'hello q', 'hello r', 'hello s', 'hello t', 'hello v', 'hello z', 'hello ü
', 'hello ä', 'hello ö', 'hello y', 'hello w', 'hello x']

That doesn’t seem useful.

There’s nothing wrong with taking the input, like you are, and outputting directly to the div, but this is not written in a way that can be fast at all. It’s performing API requests something like 20+ times every time the callback is fired. That takes a bit. For it to be really fast you’d need to do at most 1 API request per callback execution.

You also have no initial value for longname, so the callback could end up returning None if that variable is never defined.

how can I create a search box that gives me an HTML table with all these results?

You can loop over the results and fit them into a table with the format you want. Here is a very simple table I created. It worked when I ran it locally using your sample data as DATA

def update_output(input_value):
    table_rows = [html.Tr([html.Td(x['longname'])]) for x in DATA['quotes']]
    output_table = html.Table([
        html.Th([
            html.Td('Longname'),
        ]),
        html.Tr([
            html.Td(input_value)
        ]),
    ] + table_rows)
    return output_table