Custom autocomplete for Google location search with React

Autocomplete is a feature that gives you type-ahead-search in your applications the behave the Google Maps search field. This service can match for the full words and substrings, resolving place names, addresses, and plus codes.

Today I am writing this article for How to implement Google Search Autocomplete API using javascript function. So let’s get started.

Step 1 : Create The New React Application

npx create-react-app googlesearch

Step 2 : Add Script

Add the below script in your in Index.html file and replace the YOUR_API_KEY with your api key.

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&amp;libraries=places"></script>

Step 3 : Create Search Component

Create a component with input element using react functional component. And set value into the state when user type. In below example I have created InputSearch.jsx and added <input> element.

import React, { useState } from "react";

const InputSearch = () => {
  const [searchValue, setSearchValue] = useState("");

  const handlerLocationSearch = (e) => {
    setSearchValue(e.target.value);
  };

  return (
    <div>
      <input onChange={handlerLocationSearch} value={searchValue} />
    </div>
  );
};

export default InputSearch;

Step 2 : Implement google Search AutoComplete Function

Below is the google auto complete function which will return the number of result based on search value.

In this example, There is one function which is called when user type in input. So based on input value the value is passing to google autocomplete and it is giving the search results.

const handlerLocationSearch = (e) => {
    setSearchValue(e.target.value);
    var service = new google.maps.places.AutocompleteService();
    service.getPlacePredictions(
      {
        input: e.target.value,
        types: ["geocode"],
        componentRestrictions: { country: "us" },
      },
      function (predictions, status) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
          let result = [...predictions];
          setList(result);
        } else {
          setList([]);
        }
      }
    );
  };

Example Doc

This is the copy of whole file for search auto complete.

import React, { useState } from "react";

const InputSearch = () => {
  const [searchValue, setSearchValue] = useState("");
  const [list, setList] = useState([]);

  const handlerLocationSearch = (e) => {
    setSearchValue(e.target.value);
    var service = new google.maps.places.AutocompleteService();
    service.getPlacePredictions(
      {
        input: e.target.value,
        types: ["geocode"],
        componentRestrictions: { country: "us" },
      },
      function (predictions, status) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
          let result = [...predictions];
          setList(result);
        } else {
          setList([]);
        }
      }
    );
  };

  return (
    <div>
      <input onChange={handlerLocationSearch} value={searchValue} />
      {list.map((data, index) => (
        <div>{data.description}</div>
      ))}
    </div>
  );
};

export default InputSearch;

Hope this article will help you to implement custom use of search auto complete easily and hope you enjoy this article. Give me clap for more support.

Thank You!