googleautocomplete

when user start typing google autocomplete server the list of suggestions

by saisoft00

HTML

<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
  <input type="text" class="gauto" placeholder="search here" />
  <div class="list"></div>

JavaScript

$( ".gauto" ).keyup(function() {
  var ui = $(this).val();
  /* only execute if user input length is greater than 2 characters */
  if(ui.length > 2){
    function testAjax(handleData) {
      $.ajax({
        type: "GET",
        url: "https://maps.googleapis.com/maps/api/place/autocomplete/json?"+
        "input="+ui+"&types=(cities)&language=pt_BR&key=youapikey",
        cache: false,
        success: function(data){
          handleData(data);
        }
      });
    }
    /* ajax call back request */
    testAjax(function(output){
      // here you use the output
      $( ".list" ).empty();
      var result = output.predictions;
      result.forEach(function(item){
        //console.log(item.description);
        $( ".list" ).append( "<p>"+item.description+"</p>" );
      });
    });
  }else{
    $( ".list" ).empty();
  }
});