1

I have an address field and a dropdown where I intend to populate the autocomplete suggestions from mapbox API. In the callback, I pass the query string from input id='address_autocomplete'. However, I am not seeing the values returned by the function population dropdown.

dbc.InputGroup(
           [
               dbc.InputGroupAddon("Property Address"),
               dcc.Input(id='address_autocomplete'),
               dcc.Dropdown(id='address_dropdown',style={'width':'60%'})
           ],
           style={'margin-top':'30px', 'width': '53%', 'float': 'left'},
       ),



# Property address autocomplete
@app.callback(Output('address_dropdown', 'options'),
              [Input('address_autocomplete', 'value')])

    def autocomplete_address(value):
    
        print(value)
    
        addr = {}
    
        # Call mapbox API and limit Autocomplete address suggestions
        ret_obj = geocoder.forward(value, lon=-112.0913905, lat=33.4514652, limit=3)
        response = ret_obj.json()
    
        for i in range(len(response['features'])):
    
            addr["res{}".format(i)] = response['features'][i]['place_name']
    
        if value:
    
            return [{'label': addr['res_0'], 'value': addr['res_0']},
                    {'label': addr['res_1'], 'value': addr['res_1']},
                    {'label': addr['res_2'], 'value': addr['res_2']}]


# Function call
r = geocoder.forward('Washington Park', lon=-112.0913905, lat=33.4514652, limit=3)
rj = r.json()

# Return

Washington Park, Phoenix, Arizona 85015, United States
Washington Park Playground, Phoenix, Arizona 85015, United States
Washington Park, Chicago, Illinois 60637, United States
kms
  • 1,810
  • 1
  • 41
  • 92
  • Did you try this code? I suppose it does not work, since you asked a question, right? Do you get some specific error, or what is the question about? – Niko Föhr Jul 19 '20 at 14:20
  • @np8 updated the question, please see above. – kms Jul 19 '20 at 15:29

1 Answers1

1

check out this minimal example of what I believe you're trying to accomplish: Show a drop down list of city/state suggestions as the user types-

index_layout = html.Div([
        dbc.Input(
            type="text",
            id=dict(type='searchData', id='dest-loc'),
            placeholder="Enter Location",
            persistence=False,
            autocomplete="off",
            list='list-suggested-inputs'
        ),
        html.Datalist(id='list-suggested-inputs', children=[html.Option(value='empty')])
    ]
    )

@app.callback(
    Output('list-suggested-inputs', 'children'),
    Input({"id": 'dest-loc', "type": "searchData"}, "value"),
    prevent_initial_call=True
)
def suggest_locs(value):
    if len(value) < 4:
        raise dash.exceptions.PreventUpdate
    google_api_key ='YOUR KEY'
    url = f'https://maps.googleapis.com/maps/api/place/autocomplete/json?input={value}&types=locality&region=us&key={google_api_key}'
    r = requests.get(url)

    print(r.json()['predictions'][0])

    return [html.Option(value=l['description']) for l in r.json()['predictions']]

key notes:

  • add Datalist html component
  • in the Input, set list = id of your Datalist element
  • parameter types=locality in google api call
grantr
  • 878
  • 8
  • 16