文本搜索 - 自動完成

我的網站被稱爲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>

來源

2012-03-02 James

你能不能使用jQuery UI自動完成與遠程數據庫並進行搜索文件搜索您的融合表？ http://jqueryui.com/demos/autocomplete/#remote – 2012-03-02 13:01:01

自動完成的東西（由jqueryui和google.visualizations庫處理）都發生在您發佈的代碼之前。如示例所示，在您完成自動完成工作後，您引用的代碼應該可以正常工作。 – 2012-03-02 15:06:34

您的解決方案的一部分將涉及從您的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>

在此處輸入代碼

來源

2012-03-02 22:54:00

文本搜索 - 自動完成

回答

相關問題