Поиск текста - Автозаполнение - Отличная библиотека

Мой сайт называется 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 Auto комплекте с удаленной базой данных и сделать поиск файла поиска вашего сводную таблицу? http://jqueryui.com/demos/autocomplete/#remote –

Заполнение автозаполнения (которое обрабатывается библиотеками jqueryui и google.visualizations), все происходит до отправленного вами кода. Код, который вы цитируете, должен работать после того, как вы получите автозаполнение, как показывает пример. –

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

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

ответ

Смежные вопросы