Table Chart with Query

by BaronGrivet

HTML

<script src="https://www.google.com/jsapi"></script>
<h2>
Data in Spreadsheet:
</h2>
<pre>
Block Hill Road
Greenhill Road
Hill Road
Brownhill Road
</pre>
<p>
 Enter Street Name to Search Data:
</p>
<form>
 <input id="addressSearch" type="text" placeholder="e.g. Hill Road"/>
</form>
<div id="visualization"></div>

JavaScript

var visualization;
var delay = (function(){
  var timer = 0;
  return function(callback, ms){
    clearTimeout (timer);
    timer = setTimeout(callback, ms);
  };
})();

$(document).ready(function(){
	
  $('#addressSearch').keyup(function(){
    delay(function(){
      var addressSearchInput = $('#addressSearch').val().toLowerCase();
      if(addressSearchInput.length > 2){
         var addressQuery = 'SELECT A WHERE LOWER(A) LIKE "%'+addressSearchInput+'%" ORDER BY A ASC LIMIT 10';
      }

      if(addressQuery){
        google.setOnLoadCallback(drawVisualization(addressQuery));    
      } else {
        $('#visualization').empty();
      }
    
    }, 200 );

  });
  
});

google.load('visualization', '1', {
  packages: ['table']
});

function drawVisualization(addressQuery) {
		var timer = 1;
		console.log(addressQuery);
    var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1SPpZQ3KolUOI2GxNz4yvuAr5-5DFi2yMQEaQ0efNJJ0/edit#gid=46921725'
    );
    query.setQuery(addressQuery);
    query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
    if (response.isError()) {
        alert('error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
    }
    var data = response.getDataTable();
    visualization = new google.visualization.Table(
		document.getElementById('visualization'));
    visualization.draw(data, null);
    var timer = null;
}