这个jQuery UI自动完成远程JSON请求Google Suggest(Codeigner)有什么问题


What is wrong with this jQuery UI autocomplete remote JSON request Google Suggest (Codeigniter)?

我正在尝试模仿谷歌建议。我收到了谷歌的回复,所以所有人都在那里工作,但由于某种原因,我无法显示自动完成选项。

这是我的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