全文搜索 - 自动完成 [英] Text Search - Autocomplete
问题描述
我的网站被称为震害地图。我试图做一个搜索框自动完成与从融合表中的列可能的结果列表。 这是一个很好的例子，但是我觉得很难匹配到我自己因为现在我有我的查询语句和加入。这是我的大学项目和任何帮助将AP preciated。如何编辑下面code允许这样做？
搜索字符串=的document.getElementById（'搜索串，'）值;
如果（搜索字符串）{
query.push（'地震'包含'+搜索字符串+'）; }＆LT; DIV的风格=的margin-top：10px的;＆GT;
＆LT;标签＆gt;地震名称：LT; /标签＆gt;＆LT; BR /＆GT;
＆LT;输入类型=文本ID =搜索串，/＆GT;
＆LT;输入类型=按钮的onclick =doQuery（）;值=搜索/＆GT;
＆LT; / DIV＆GT;
您的解决方案将涉及从你的融合表得到的值的唯一列表从地震柱的一部分。这可以通过FT的无证JSONP API来完成。然后你可以使用你的文字输入jQueryUI的自动完成的方法。这里的code。对不起，这是一个有点长，但它应该在你的浏览器中运行一个完整的文件。
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT;标题＆GT; Fusion Tables的JSONP＆LT; /标题＆GT;＆所述; SCRIPT SRC =HTTP：//$c$c.jquery.com/jquery-1.7.1.min.js＆GT;＆下; /脚本＆GT;＆LT;脚本类型=文/ JavaScript的＆GT;
VAR TABLEID = 2951949;//////////////////////////////
// SELECT DISTINCT需要GROUP BY COL_NAME并添加COUNT（）操作符。 2列将返回不同colname需要和计数。
//////////////////////////////
功能getFTDistinct（表标识符，COL_NAME，其中，successFunction）{ VAR queryUrlHead ='https://fusiontables.googleusercontent.com/fusiontables/api/query?sql=';
VAR queryUrlTail ='和; jsonCallback =？; VAR的查询=SELECT+ COL_NAME +，COUNT（）FROM+的table_id;
如果（！哪里）{
查询+ =GROUP BY+ COL_NAME;
}其他{
查询+ =''+，其中+GROUP BY+ COL_NAME;
}
VAR queryurl = EN codeURI（queryUrlHead +查询+ queryUrlTail）; $阿贾克斯（{
键入：GET，
网址：queryurl，
数据类型：JSONP，//返回CSV FustionTable响应作为JSON
成功：successFunction，
错误：函数（）{警报（AJAX错误+ queryurl）; }
}）;}功能example_dataHandler（D）{
//获取的实际数据出来的JSON对象
VAR COLS = d.table.cols;
VAR行= d.table.rows;
VAR ROW_COUNT = 0;
VAR的结果='＆LT;表边框=1的cellpadding =4＆GT;';
结果+ ='＆LT; TR＆GT;';
对于（VAR I = 0; I＆LT; cols.length;我++）{
结果+ ='＆下;第i' + COLS [I] +'＆下; /第i';
}
结果+ ='＆LT; / TR＆GT;';
对于（VAR I = 0; I＆LT; rows.length;我++）{ 结果+ ='＆LT; TR＆GT;';
为（J = 0; J＆LT;行[I]。长度; J ++）
{
结果+ ='＆LT; TD＆GT;' +行[I] [J] +'＆LT; / TD＆GT;';
}
结果+ ='＆LT; / TR＆GT;';
ROW_COUNT ++;
}
结果+ ='＆LT; /表＆gt;';
结果+ ='＆LT; BR /＆GT;'; 结果+ ='行计数：'+ ROW_COUNT +'＆LT; BR /＆GT;';; $（＃结果），文字（''）。
$（＃结果）追加（结果）;
}功能distinctTest（）
{
getFTDistinct（TABLEID，'地震'，''，example_dataHandler）;
}＆LT; / SCRIPT＆GT;＆LT; /头＆GT;
＆LT;身体GT;
＆LT; BR /＆GT;
＆LT;输入类型=按钮值=DISTINCT大地震的onClick =distinctTest（）;＆GT;
＆LT; BR /＆GT;
＆LT; DIV ID =结果＆GT;＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
在此输入code
My website is called Earthquake Damage Map. I am trying to make a search box autocomplete with a list of possible results from the column in the fusion table. This is a good example, however I find it difficult to match it to my own as I now have my queries joined by AND. This is my university project and any help would be appreciated. How do I edit the following code to allow this?
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>
Part of your solution will involve getting from your Fusion Table a unique list of values from your Earthquake column. This can be done via FT's undocumented JSONP API. Then you can use jqueryui Auto Complete methods on your text input. Here's the code. Sorry it's a bit long but it's a complete file which should run in your browser.
<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>
enter code here
这篇关于全文搜索 - 自动完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
