テキスト検索 - オートコンプリート

私のウェブサイトは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 –

jqueryuiおよびgoogle.visualizationsライブラリで処理されるオートコンプリートはすべて、投稿したコードの前に行われます。あなたが引用したコードは、例のように自動補完機能が働くと動作するはずです。 –

あなたのソリューションの一部には、あなたの地震柱の値のユニークなリストがあなたのFusion Tableから取得されます。これは、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>

は

出典

2012-03-02 22:54:00

テキスト検索 - オートコンプリート

答えて

関連する問題