文本搜索 - 自动完成答案

【问题标题】：Text Search - Autocomplete文本搜索 - 自动完成
【发布时间】：2012-03-20 23:22:58
【问题描述】：

我的网站名为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>

【问题讨论】：

你不能使用 Jquery UI Auto Complete 和远程数据库并让搜索文件搜索你的融合表吗？ jqueryui.com/demos/autocomplete/#remote
自动完成的东西（由 jqueryui 和 google.visualizations 库处理）都发生在您发布的代码之前。如示例所示，一旦自动完成工作，您引用的代码应该可以工作。

标签： jquery autocomplete google-maps-api-3 google-fusion-tables

【解决方案1】：

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

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

在此处输入代码

【讨论】：