Поиск текста - автозаполнение - PullRequest
Новая
       15

Поиск текста - автозаполнение

0 голосов
/ 02 марта 2012

Мой сайт называется Карта повреждений от землетрясения .Я пытаюсь сделать окно поиска автозаполнением со списком возможных результатов из столбца в таблице слияния. Это хороший пример , однако мне трудно сопоставить его с моим собственным, поскольку теперь мои запросы объединяются с помощью 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>

1 Ответ

0 голосов
/ 03 марта 2012

Часть вашего решения будет включать получение из вашей таблицы Fusion уникального списка значений из вашего столбца Землетрясение. Это можно сделать с помощью недокументированного API JSONP от FT. Затем вы можете использовать методы автозаполнения 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>

введите код здесь

...