Bootstrap typeahead with Google Auto Suggest

Bootstrap typeahead with Google Auto Suggest

<label for="auto_suggest">Google Auto Suggest: </label>
<input id="auto_suggest" type="text" width="500">
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<script>
var google_auto_suggest_url = "http://suggestqueries.google.com/complete/search?client=chrome&q=";
$('#auto_suggest').typeahead({
  source: function(query, process) {
      var temp_arr = query.split(/[.,]+/); // Regex to find only the sentences after a full stop or comma.
      var search_sentence = temp_arr[temp_arr.length-1];
      return $.ajax({
        dataType: "jsonp",
        url: google_auto_suggest_url+search_sentence,
        success: function (json) {
          process(process_callback(json));
        }
      });
  },

  updater: function(item) {
    var query = $("#auto_suggest").val();
    var temp_arr = query.split(this.$element.val());
    return this.$element.val().replace(/[^,]*$/,' ')+item;
  },

  matcher: function(item) {
    return item;
  }
});

function process_callback(json) {
    return json[1];
}
</script>