Google Search AutoComplete Feature

lalalion · 发表于 14-12-2011 03:51 PM

各位大大，

小弟想写个像Google search 这样在textbox里打了比如说"a"，然后在AutoComplete的feature里会出现四个有“a”的选择(select from db limit 4 这样的)，我想应该是ajax 和 javascript 的东东……有简单的例子给我参考吗？网上找的js都看不懂

因为小弟实力还不够……

请帮帮小弟～～～

littlepenguin · 发表于 15-12-2011 01:45 PM

本帖最后由 littlepenguin 于 15-12-2011 02:01 PM 编辑

回复 1# lalalion

嗨，可以用jquery和google suggest api。来一个简化版的, 跟着网上的source code修改的

index.html 放一个textbox， suggestion box和list

<html>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="search.js"></script>
<link rel="stylesheet" type="text/css" href = "style.css"/>
<input type="text" size="50" value="" id="input" onkeyup="search(this.value);" onblur="auto();" />
<div class="suggestionsBox" id="SuggestionsBox" style="display: none;">
<div class="suggestionList" id="SuggestionsList">
</div>
</div>
</html>

复制代码

search.js

function search(input)
{
if(input.length == 0)
{
$('#SuggestionsBox').hide();
}
else
{
$.post("search.php", {query: input},
function(data)
{
if(data.length >0)
{
$('#SuggestionsBox').show();
$('#SuggestionsList').html(data);
}
});
}
}
function auto(value)
{
$('#input').val(value);
setTimeout("$('#SuggestionsBox').hide();", 200);
}

复制代码

search.php，用xmlreader read from google api。

<?php
$query = urlencode($_POST['query']);
if(strlen($query) >0)
{
$reader = new XMLReader();
if (!$reader->open("http://google.com/complete/search?output=toolbar&q=$query"))
{
die("Cannot open url");
}
while($reader->read())
{
if($reader->nodeType == XMLReader::ELEMENT)
{
if($reader->localName == "suggestion")
{
echo '<div onClick="auto(\''.$reader->getAttribute('data').'\');">'.$reader->getAttribute('data').'</div>';;
}
}
}
$reader->close();
}
?>

复制代码

style.css

.suggestionsBox
{
border: 2px solid #000;
width: 330px;
}
.suggestionList div
{
padding: 3px;
cursor: pointer;
}
.suggestionList div:hover
{
background-color: #E6E6E6;
}

复制代码

lalalion · 发表于 16-12-2011 05:44 PM

回复 2# littlepenguin

wow! 谢谢这位大哥的分享～小弟已经找到解决方法了～也是jQuery的，(*^__^*) 嘻嘻……
小弟要的比较简单，没有Google API的，只是想要好像google auto suggestion 那样～～

正在跟上司谈谈怎样跟我们的system integrate

我是要做类似这个的的： http://jqueryui.com/demos/autocomplete/#remote

steven1379 · 发表于 25-6-2012 01:03 AM

我的fyp是用 jquery ajax + web service + vb.net 来弄的.

		自动登录	找回密码
密码			注册

Google Search AutoComplete Feature

所属分类: 电脑手机

浏览过的版块