Add autocomplete to input

Estimated reading time: 1 minute

This example uses JawgPlaces.Input to initialize a Jawg Places Input inside an HTML element on a webpage. It will transform the <input> with the id my-input into a geocoding search bar with search on typing using Forward Geocoding from Jawg Places API.

Since this is using autocomplete geocoding with search on typing, it will automatically send requests to the API.

Checkout all Input options available on Jawg Places JS: JawgPlaces.JawgPlacesInputOptions.

The value <YOUR_ACCESS_TOKEN> in the <script> tag must be replaced by your own access token from the Jawg Lab.

View on GitHub

<html>
  <head>
    <script src="https://api.jawg.io/libraries/jawg-places@latest/jawg-places.js?access-token=<YOUR_ACCESS_TOKEN>"></script>
  </head>
  <body>
    <input id="my-input" type="text" placeholder="Search" />
    <script>
      new JawgPlaces.Input({
        input: '#my-input',
        searchOnTyping: true,
        size: 10,
      });
    </script>
  </body>
</html>