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

时间:2012-08-04 01:44:52

标签: php jquery-ui codeigniter

我正在尝试模仿Google Suggest。我得到了Google的回复,所以所有人都在那里工作但由于某种原因我无法获得自动填充选项。

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

2 个答案:

答案 0 :(得分:0)

尝试提醒(“/ index.php / search / google_suggest /”);我相信base_url以斜线结尾,在您的示例中可能如下所示:www.site.com//index.php/search/google_suggest /.

更糟糕的情况是,使用Firebug或Chrome开发者工具查看问题所在。

答案 1 :(得分:0)

您是否尝试过使用此签名作为“来源”选项进行自动填充?

    source: function( request, response ) {}

它使您可以完全控制ajax请求,以及更多调试机会。请参阅jquery ui的文档并查看jsonp示例的源代码

http://jqueryui.com/demos/autocomplete/#remote-jsonp