Question

我的网站名为Earthquake Damage Map。我正在尝试使用融合表中列的可能结果列表创建一个搜索框自动完成。 This is a good example但是我觉得很难将它与我自己匹配，因为现在我的查询由AND加入。这是我的大学项目，任何帮助将不胜感激。如何编辑以下代码以允许此操作？

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>

Answer 1

您的部分解决方案将涉及从您的Fusion Table获取地震专栏中唯一的值列表。这可以通过FT的未记录的JSONP API完成。然后，您可以在文本输入上使用jqueryui自动完成方法。这是代码。对不起，它有点长，但它是一个完整的文件，应该在你的浏览器中运行。

<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>

在这里输入代码

文本搜索 - 自动完成

1 个答案: