Text Search - Autocomplete

StackOverflow https://stackoverflow.com/questions/9533602

Question

My website is called Earthquake Damage Map. I am trying to make a search box autocomplete with a list of possible results from the column in the fusion table. This is a good example, however I find it difficult to match it to my own as I now have my queries joined by AND. This is my university project and any help would be appreciated. How do I edit the following code to allow this?

searchString = document.getElementById('search-string4').value; 
if(searchString){
   query.push("'Earthquake' CONTAINS '" + searchString + "'"); }

<div style="margin-top: 10px;"> 
  <label>Earthquake Name:</label><br />
  <input type="text" id="search-string4" /> 
  <input type="button" onclick="doQuery();" value="Search" /> 
</div>
Was it helpful?

Solution

Part of your solution will involve getting from your Fusion Table a unique list of values from your Earthquake column. This can be done via FT's undocumented JSONP API. Then you can use jqueryui Auto Complete methods on your text input. Here's the code. Sorry it's a bit long but it's a complete file which should run in your browser.

<html>
<head>
<title>Fusion Tables JSONP</title>

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 

<script type="text/javascript">
var tableid = 2951949;

//////////////////////////////
// SELECT DISTINCT need to GROUP BY col_name and add COUNT() operator.  2 columns will be returned distinct colname and count.
//////////////////////////////
function getFTDistinct(table_id, col_name, where, successFunction) {

    var queryUrlHead = 'https://fusiontables.googleusercontent.com/fusiontables/api/query?sql=';
    var queryUrlTail = '&jsonCallback=?';

    var query = "SELECT " + col_name + ", COUNT() FROM " + table_id;
    if(!where){
        query += " GROUP BY " + col_name;
    }else{
        query += ' ' + where + " GROUP BY " + col_name;
    }
    var queryurl = encodeURI(queryUrlHead + query + queryUrlTail);

    $.ajax({
        type: "GET",
        url:  queryurl,
        dataType: "jsonp",  // returns CSV FustionTable response as JSON
        success: successFunction,
        error: function () {alert("AJAX ERROR for " + queryurl ); }
    });

}

function example_dataHandler(d) {
    // get the actual data out of the JSON object
    var cols = d.table.cols;
    var rows = d.table.rows;
    var row_count = 0;
    var results = '<table border="1" cellpadding="4">';
    results += '<tr>';
    for (var i = 0; i < cols.length; i++) {
        results += '<th>' + cols[i] + '</th>';
    }
    results += '</tr>';
    for (var i = 0; i < rows.length; i++) {

        results += '<tr>';
        for(j=0; j < rows[i].length; j++)
        {
            results += '<td>' +  rows[i][j] + '</td>';
        }
        results += '</tr>';
        row_count++;
    }
    results += '</table>';
    results += '<br />';

    results += 'Row Count: ' + row_count + '<br />';;

    $("#results").text('');
    $("#results").append(results);
}

function distinctTest()
{ 
   getFTDistinct(tableid, 'Earthquake', '', example_dataHandler);
}

</script>

</head>
<body>
<br />
<input type="button" value="DISTINCT Earthquake" onClick="distinctTest();">
<br />
<div id="results"></div>
</body>
</html>

enter code here

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top