jQuery 自动完成 - 无效标签 (Firebug) / 未捕获的 SyntaxError (Chrome)答案

【问题标题】：jQuery Autocomplete - Invalid label (Firebug) / Uncaught SyntaxError (Chrome)jQuery 自动完成 - 无效标签 (Firebug) / 未捕获的 SyntaxError (Chrome)
【发布时间】：2011-03-19 19:38:00
【问题描述】：

在 SO 的好人的帮助下，我设法在 CodeIgniter 2.0 的基本测试页面上运行了我的自动完成功能。

当我将代码移动到实际页面时，出现了问题。

只要我输入第一个字母，我就会进入 Firebug

invalid label
[Break On This Error] {"response":"true","message":[{"label"... My Park","value":"Thier  Park"}]}

在 Chrome 上

// jquery.min.js:line 16
Uncaught SyntaxError: Unexpected token :
d.d.extend.globalEvaljquery.min.js:16
d.ajaxSetup.converters.text scriptjquery.min.js:16
bQjquery.min.js:16
vjquery.min.js:16
d.support.ajax.d.ajaxTransport.send.c

这是我的 CI 查看代码：

<script>
    $(document).ready(function() {    

        $("#exer_loc").autocomplete({
            source: function(req, add){
                $.ajax({
                    url: '<?php echo base_url(); ?>exercise/loc_autocomplete',
                    dataType: 'json',
                    type: 'POST',
                    data: req,
                    success: function(data){
                        if(data.response =='true'){
                           add(data.message);
                        }
                    }
                });
        },
        minLength: 1,
        select: function(event, ui){
            $(this).end().val(ui.item.value);
            }
        });

     });   
</script>

还有我的 CI 控制器代码：

public function loc_autocomplete()
{

    $search = $this->input->post('term');

    $data['response'] = 'false';
    $this->db->select('*');
    $this->db->from('loc_exercise');
    $this->db->like('locations', $search);
    $locations = $this->db->get()->result();

    if (count($locations) > 0) {
        $data['message'] = array();

        foreach ($locations as $location) {
            $data['message'][] = array('label' => $location->locations,
                'item'  => $location->locations,
                'value' => $location->locations );
        }

        $data['response'] = 'true';
    }
    echo json_encode($data);
}

如上所述，这一切都可以在 CI 的基本页面上完美运行。

但是当它被输出到我的标准 CI 模板时，我得到了错误。我已经禁用了其他几个 JS 脚本，但问题仍然存在。

奇怪的是，如果我在上面的 CI 视图脚本之前重复下载 jQuery，它会起作用。但显然这不是一个解决方案：P。

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <script>
        $(document).ready(function() {    

            $("#exer_loc").autocomplete({
                source: function(req, add){
etc...

有人知道如何杀死这个错误吗？

谢谢！

编辑：

这是控制台上的 JSON 响应

    [Object { label="My Place", item="My Place", value="My Place"}, Object { label="Pond Park", item="Pond Park", value="Pond Park"}, Object { label="Rock Park", item="Rock Park", value="Rock Park"}]

//html
{"response":"true","message":[{"label":"My Place","item":"My Place","value":"My Place"},{"label":"Fresh Pond Park","item":"Fresh Pond Park","value":"Fresh Pond Park"},{"label":"Cat Rock Park","item":"Cat Rock Park","value":"Cat Rock Park"}]}

EDIT2：

使用console.log(req) 显示

Object { term="asd"}

【问题讨论】：

req 变量中有什么？你能把它吐给console.log吗？另外，实际返回的 json 是什么，你也可以发布吗？
还有if I repeat the download of jQuery right before the CI view script above it works是什么意思？！！您最初将脚本放在哪里？您确定它们已成功加载吗？
@ifaour - 我将脚本放入<head> - 我只是碰巧注意到，如果我在查看代码之前重新加载 jQuery，它可以工作
@groovetrain - 将 JSON 添加到上面的帖子中
@ifaour - 脚本已成功加载，b/c 页面上的其他 JS 工作正常 - 当我禁用其他 JS 时，问题仍然存在

标签： php jquery codeigniter jquery-autocomplete

【解决方案1】：

听起来它与此处列出的 jQuery 重复 ajax 调用错误有关：jQuery Bug #8398

事实证明，jQuery 1.5 正在将后续的 ajax 调用 json 修改为 jsonp，这导致了这个错误。

我通过遵循错误更改历史记录中建议的一种解决方法来修复它，并在进行 ajax 调用之前将以下代码放置在某处：

$.ajaxSetup({
   jsonp: null,
   jsonpCallback: null
});

也应该解决其他 ajax 请求的任何问题。

【讨论】：