我正在尝试模仿谷歌建议。我收到了谷歌的回复,所以所有人都在那里工作,但由于某种原因,我无法显示自动完成选项。
这是我的Codeigniter控制器功能:
public function google_suggest($query)
{
//$query = implode(" ", $query);
$url = 'http://suggestqueries.google.com/complete/search?output=firefox&client=firefox&hl=en&q=' . urlencode($query);
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 10);
curl_setopt($ch, CURLOPT_TIMEOUT, 10);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows NT 6.0; rv:2.0.1) Gecko/20100101 Firefox/4.0.1");
$data = curl_exec($ch);
curl_close($ch);
if ($data)
{
$data = json_decode($data, true);
$data = $data[1];
foreach ($data as $word)
{
$row['id'] = $word;
$row['value'] = $word;
$row_set[] = $row;
}
var_dump($row_set); //this works and responds so I know there is data
echo json_encode($row_set);
}
else
{
return NULL;
}
}
样本输出:
[{"id":"testosterone","value":"testosterone"},{"id":"test","value":"test"},{"id":"test my speed","value":"test my speed"},{"id":"testicular cancer","value":"testicular cancer"},{"id":"testament","value":"testament"},{"id":"testosterone pills","value":"testosterone pills"},{"id":"testicular pain","value":"testicular pain"},{"id":"testudo","value":"testudo"},{"id":"testicular torsion","value":"testicular torsion"},{"id":"testosterone cypionate","value":"testosterone cypionate"}]
这是我的客户端视图:
<style>
.ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
</style>
<script>
$(function() {
function log( message ) {
$( "<div/>" ).text( message ).prependTo( "#log" );
$( "#log" ).scrollTop( 0 );
}
$( "#birds" ).autocomplete({
source: "<?=base_url()?>/index.php/search/google_suggest/", // this link definitely works as I've tried it in isolation in another AJAX function
minLength: 2,
select: function( event, ui ) {
log( ui.item ?
"Selected: " + ui.item.value + " aka " + ui.item.id :
"Nothing selected, input was " + this.value );
}
});
});
</script>
<div class="ui-widget">
<label for="birds">Birds: </label>
<input id="birds" />
</div>
尝试提醒("/index.php/search/google_suggest/");我相信base_url以斜杠结尾,在您的示例中可能是这样的:www.site.com/index.php/search/google_suggest/.
更糟糕的情况是,使用Firebug或Chrome开发工具来查看问题所在。
您是否尝试将此签名用于"源"选项以自动完成?
source: function( request, response ) {}
它使您能够完全控制ajax请求,并提供更多的调试机会。请参阅jquery ui的文档,并查看jsonp示例的源代码
http://jqueryui.com/demos/autocomplete/#remote-jsonp