텍스트 검색 - 자동 완성 - 우수한 라이브러리

내 웹 사이트는 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

텍스트 검색 - 자동 완성

답변

관련 문제