fusion table autocomplete text search

Question

I went through this link which shows a fusion table map layer with auto complete search box. But in this example, only the first 500 rows of fusion table is indexing in auto complete.

Find the fiddle below for the reference.

  function initAutoComplete(tableId) {
    // Retrieve the unique store names using GROUP BY workaround.
    var queryText = encodeURIComponent(
        "SELECT 'FB_INDO_2000', COUNT() " +
        'FROM ' + tableId + " GROUP BY 'FB_INDO_2000'");
    var query = new google.visualization.Query(
        'http://www.google.com/fusiontables/gvizdata?tq='  + queryText);

    query.send(function(response) {
      var numRows = response.getDataTable().getNumberOfRows();

      // Create the list of results for display of autocomplete.
      var results = [];
      for (var i = 0; i < numRows; i++) {
        results.push(response.getDataTable().getValue(i, 0));
      }

      // Use the results to create the autocomplete options.
      $('#store').autocomplete({
        source: results,
        minLength: 2
      });
    });
  }

EDIT: As geocodezip suggested, i updated my fiddle here by changing the query to FT API v1 as,

var queryText = encodeURIComponent(
        "SELECT 'FB_INDO_2000', COUNT() " + 'FROM ' + tableId + " GROUP BY 'FB_INDO_2000'");
     var queryUrlHead = 'https://www.googleapis.com/fusiontables/v1/query?sql=';
    var queryUrlTail = '&key=AIzaSyCAI2GoGWfLBvgygLKQp5suUk3RCG7r_ME';
    var query = new google.visualization.Query(queryUrlHead + queryText + queryUrlTail);

But unable to achieve auto complete.

Answer 1

The Google Visualization API is limited to 500 results from a FusionTable.

Use the FusionTables v1 API instead, it does not have that restriction.

working version of your code:

<script src="https://www.googleapis.com/fusiontables/v1/query?sql=SELECT%20'FB_INDO_2000'%20FROM%201E9BosnI16GISRmTBkINI2aWlYVdZae46v8jClAc%20GROUP%20BY%20'FB_INDO_2000'&callback=drawMap&key=AIzaSyCAI2GoGWfLBvgygLKQp5suUk3RCG7r_ME" type="text/javascript" ></script>

   function drawMap(response) {
      var numRows = response.rows.length;

      // Create the list of results for display of autocomplete.
      var results = [];
      for (var i = 0; i < numRows; i++) {
        results.push(response.rows[i][0]);
      }

      // Use the results to create the autocomplete options.
      $('#store').autocomplete({
        source: results,
        minLength: 2
      });
   };

working fiddle

Answer 2

The problem is that you are using the Google Visualization API to get the data and it has a limit of 500 rows. The FT 1.0 API via JSONP does not as @Swires pointed out. See this example: https://developers.google.com/fusiontables/docs/samples/basic_jsonp_request