Breaking News: Grepper is joining You.com. Read the official announcement!

autocomplete location input for react

Better Baboon answered on June 22, 2023 Popularity 3/10 Helpfulness 1/10

answer autocomplete location input for react

autocomplete location input for react

Comment

import * as React from 'react';
import { Loader } from "@googlemaps/js-api-loader";
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';
import LocationOnIcon from '@mui/icons-material/LocationOn';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';
import parse from 'autosuggest-highlight/parse';
import { debounce } from '@mui/material/utils';

const GOOGLE_MAPS_API_KEY = 'YOUR_API_KEY';

const loader = new Loader({
  apiKey: GOOGLE_MAPS_API_KEY,
  libraries: ['places'],
});

export default function AddressInput() {
  const [value, setValue] = React.useState(null);
  const [inputValue, setInputValue] = React.useState('');
  const [options, setOptions] = React.useState([]);
  const loaded = React.useRef(false);

  const autocompleteService = React.useRef(null);

  React.useEffect(() => {
    if (!loaded.current) {
      loaded.current = true;
      loader.load().then(() => {
        autocompleteService.current = new window.google.maps.places.AutocompleteService();
      });
    }
  }, []);

  const fetch = React.useMemo(
    () =>
      debounce((request, callback) => {
        autocompleteService.current.getPlacePredictions(request, callback);
      }, 400),
    []
  );

  React.useEffect(() => {
    let active = true;

    if (inputValue === '') {
      setOptions(value ? [value] : []);
      return undefined;
    }

    fetch({ input: inputValue }, (results) => {
      if (active) {
        let newOptions = [];

        if (value) {
          newOptions = [value];
        }

        if (results) {
          newOptions = [...newOptions, ...results];
        }

        setOptions(newOptions);
      }
    });

    return () => {
      active = false;
    };
  }, [value, inputValue, fetch]);

  return (
    <Autocomplete
      fullWidth
      id="google-map-demo"
      size='small'
      getOptionLabel={(option) =>
        typeof option === 'string' ? option : option.description
      }
      filterOptions={(x) => x}
      options={options}
      autoComplete
      includeInputInList
      filterSelectedOptions
      value={value}
      noOptionsText="No locations"
      onChange={(event, newValue) => {
        setOptions(newValue ? [newValue, ...options] : options);
        setValue(newValue);
      }}
      onInputChange={(event, newInputValue) => {
        setInputValue(newInputValue);
      }}
      renderInput={(params) => (
        <TextField {...params} fullWidth />
      )}
      renderOption={(props, option) => {
        const matches =
          option.structured_formatting.main_text_matched_substrings || [];

        const parts = parse(
          option.structured_formatting.main_text,
          matches.map((match) => [match.offset, match.offset + match.length]),
        );

        return (
          <div {...props}>
            <Grid>
              <Grid>
                <LocationOnIcon sx={{ color: 'text.secondary' }} />
              </Grid>
              <Grid>
                {parts.map((part, index) => (
                  <Box
                    key={index}
                    component="span"
                    sx={{ fontWeight: part.highlight ? 'bold' : 'regular' }}
                  >
                    {part.text}
                  </Box>
                ))}

                <Typography variant="body2" color="text.secondary">
                  {option.structured_formatting.secondary_text}
                </Typography>
              </Grid>
            </Grid>
          </div>
        );
      }}
    />
  );
}

Popularity 3/10 Helpfulness 1/10 Language javascript

Source: chat.openai.com

Tags: autocomplete input javascript location

Link to this answer
Share Copy Link

Contributed on Jun 22 2023

Better Baboon

0 Answers Avg Quality 2/10

autocomplete location input for react

Contents

More Related Answers

autocomplete location input for react

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.