Text Search - Autocomplete

走远了吗. 提交于 2019-12-12 03:09:58

问题


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>

回答1:


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



来源:https://stackoverflow.com/questions/9533602/text-search-autocomplete

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!