[BUG] Dropdown Search must prioritize front matches before body matches

[marketemp]

I am using:

dash                 1.11.0
dash-core-components 1.9.1
dash-html-components 1.0.3
dash-renderer        1.4.0
dash-table           4.6.2

This issue is not Front-End Related

**Describe the bug**

I am using the dcc.Dropdown with a list of over 5000 stock ticker symbols.  If I select any letter besides A, I am presented with all of the stocks that include that letter, not all of the stocks that begin with that letter.  It is therefore impossible to access the stock I am looking for without typing it out entirely, or using the scrollbar and manually scrolling down to it (required for 1 and 2 character symbols).  For example (screenshots), by typing M, I am offered AAMC, AAE, ABM, and 349 other symbols before getting to the one I want M (Macy's) and even hard-typing M (Enter) returns AAMC, which is why I this should be considered a bug and not a feature request.

**Expected behavior**

It would be expected that a dropdown searchbar prioritize front matches before body matches.  Body matches are nice, but most dropdown bars I've used only return front matches and ignore body matches.

**Screenshots**

Screenshots are attached as well as a file including my list of stock symbols to use as labels

[syms.txt](https://github.com/plotly/dash/files/4583478/syms.txt)

[marketemp]

chriddyp pointed me to the Dynamic Options example on https://dash.plotly.com/dash-core-components/dropdown and I solved it using:

return [o for o in options if re.match(search_value, o["label"], re.IGNORECASE)]

for front matches only or:

opt = [o for o in options if re.match(search_value, o["label"], re.IGNORECASE)]
opt.extend([o for o in options if o not in opt and search_value in o["label"]])
return opt

for front matches, then body matches. It still would be great if search worked this way, or there was an option to make search work this way using the options= argument of the dcc.Dropdown component.

[kmcminn]

expanded workaround for any wanders out there. tl;dr add another callback on your components to rewrite options.

# <snip> typical dash imports and vanilla app setup
labels = ["apple", "orange", "pear"]
options = [{'label': s[0], 'value': s[1]} for s in zip(labels, labels)]
app.layout = html.Div([
        dcc.Dropdown(
        id='my-dropdown',
        options=options,
        searchable=True,
        value=[],
        multi=True
    ),
])
    
@app.callback(
    dash.dependencies.Output("my-dropdown", "options"),
    [dash.dependencies.Input("my-dropdown", "search_value")],
)
def update_options(search_value):
    opt = [o for o in options if o["label"].lower().startswith(search_value.lower())] 
    opt.extend([o for o in options if o not in opt and search_value in o["label"]]) 
    return opt