PlaceSearch.js

Fill out a Form

Edit the code below and click "Try It Now" to display the result.

ps.on('change', (e) => {
          document.querySelector('#form-street').value = e.result.name || '';
          document.querySelector('#form-city').value = e.result.city || '';
          document.querySelector('#form-state').value = e.result.state || '';
          document.querySelector('#form-state-code').value = e.result.stateCode || '';
          document.querySelector('#form-zip').value = e.result.postalCode || '';
          document.querySelector('#form-country').value = e.result.country || '';
          document.querySelector('#form-country-code').value = e.result.countryCode || '';
        });

ps.on('clear', () => {
          document.querySelector('#form-street').value = '';
          document.querySelector('#form-city').value = '';
          document.querySelector('#form-state').value = '';
          document.querySelector('#form-state-code').value = '';
          document.querySelector('#form-zip').value = '';
          document.querySelector('#form-country').value = '';
          document.querySelector('#form-country-code').value = '';
        });

ps.on('error', (e) => {
          console.log(e);
        });
      }
    </script>
  </head>

<body style="border: 0; margin: 40px; background-color: #212121; color: #ffffff;">
    <form action="/" class="form">
        <div class="form-group">
          <label for="form-address">Address*</label>
          <input type="search" class="form-control" id="form-address" placeholder="Where do you live?" />
        </div>
        <div class="form-group">
          <label for="form-street">Street</label>
          <input type="text" class="form-control" id="form-street" placeholder="Street number and name" />
        </div>
        <div class="form-group">
          <label for="form-city">City*</label>
          <input type="text" class="form-control" id="form-city" placeholder="City">
        </div>
        <div class="form-group">
          <label for="form-state">State*</label>
          <input type="text" class="form-control" id="form-state" placeholder="State">
        </div>
        <div class="form-group">
          <label for="form-state-code">State Code*</label>
          <input type="text" class="form-control" id="form-state-code" placeholder="State Code">
        </div>
        <div class="form-group">
          <label for="form-zip">ZIP code*</label>
          <input type="text" class="form-control" id="form-zip" placeholder="ZIP code">
        </div>
        <div class="form-group">
          <label for="form-country">Country*</label>
          <input type="text" class="form-control" id="form-country" placeholder="Country">
        </div>
        <div class="form-group">
          <label for="form-country-code">Country Code*</label>
          <input type="text" class="form-control" id="form-country-code" placeholder="Country Code">
        </div>
      </form>
  </body>
</html>

​x
 
<html>
  <head>
    <script src="https://api.mqcdn.com/sdk/place-search-js/v1.0.0/place-search.js"></script>
    <link type="text/css" rel="stylesheet" href="https://api.mqcdn.com/sdk/place-search-js/v1.0.0/place-search.css"/>
​
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
​
    <script type="text/javascript">
      window.onload = function() {
        let ps = placeSearch({
          key: '8nIoYUx9GyjZsdehJySzjprSvZIqgM42',
          container: document.querySelector('#form-address'),
          useDeviceLocation: true,
          collection: [
            'address',
          ]
        });
​
        ps.on('change', (e) => {
          document.querySelector('#form-street').value = e.result.name || '';
          document.querySelector('#form-city').value = e.result.city || '';
          document.querySelector('#form-state').value = e.result.state || '';
          document.querySelector('#form-state-code').value = e.result.stateCode || '';
          document.querySelector('#form-zip').value = e.result.postalCode || '';
          document.querySelector('#form-country').value = e.result.country || '';
          document.querySelector('#form-country-code').value = e.result.countryCode || '';
        });
​
        ps.on('clear', () => {
          document.querySelector('#form-street').value = '';
          document.querySelector('#form-city').value = '';
          document.querySelector('#form-state').value = '';
          document.querySelector('#form-state-code').value = '';
          document.querySelector('#form-zip').value = '';
          document.querySelector('#form-country').value = '';
          document.querySelector('#form-country-code').value = '';
        });
​
        ps.on('error', (e) => {
          console.log(e);
        });
      }
    </script>
  </head>
​
  <body style="border: 0; margin: 40px; background-color: #212121; color: #ffffff;">
    <form action="/" class="form">
        <div class="form-group">
          <label for="form-address">Address*</label>
          <input type="search" class="form-control" id="form-address" placeholder="Where do you live?" />
        </div>
        <div class="form-group">
          <label for="form-street">Street</label>
          <input type="text" class="form-control" id="form-street" placeholder="Street number and name" />
        </div>
        <div class="form-group">
          <label for="form-city">City*</label>
          <input type="text" class="form-control" id="form-city" placeholder="City">
        </div>
        <div class="form-group">
          <label for="form-state">State*</label>
          <input type="text" class="form-control" id="form-state" placeholder="State">
        </div>
        <div class="form-group">
          <label for="form-state-code">State Code*</label>
          <input type="text" class="form-control" id="form-state-code" placeholder="State Code">
        </div>
        <div class="form-group">
          <label for="form-zip">ZIP code*</label>
          <input type="text" class="form-control" id="form-zip" placeholder="ZIP code">
        </div>
        <div class="form-group">
          <label for="form-country">Country*</label>
          <input type="text" class="form-control" id="form-country" placeholder="Country">
        </div>
        <div class="form-group">
          <label for="form-country-code">Country Code*</label>
          <input type="text" class="form-control" id="form-country-code" placeholder="Country Code">
        </div>
      </form>
  </body>
</html>