Skip to main content
 首页 » 编程设计

jQuery 自动完成远程 JSON 数据源不返回数据

2026年07月28日6pander-it

我一直在努力解决这个问题,并搜索了所有其他示例,但似乎仍然无法弄清楚,尝试使用 jquery ui 自动完成,第一次尝试将所有这些放在一起。这是我的 JS:

$(document).ready(function () { 
$("#search-title").autocomplete({ 
    source: function ( request, response ) { 
        $.ajax({ 
            url: "/include/autocomplete", 
            dataType: "json", 
            data: { 
                        term: request.term       
                    }, 
            success: function (data) { 
                response( $.map( data.stuff, function ( item ) { 
                    return { 
                        label: item.name, 
                        value: item.name 
                    }; 
                })); 
            } 
        }); 
    }, 
    minLength: 2, 
    focus: function (event, ui) { 
        $(event.target).val(ui.item.label); 
        return false; 
    }, 
    select: function (event, ui) { 
        $(event.target).val(ui.item.label); 
        window.location = ui.item.value; 
        return false; 
    } 
}); 
}); 

查看 Firebug 中的响应,我想我在这里得到了格式正确的 JSON:

{"stuff":[ {"label" : "Dragon", "value" : "http://site.com/animal/firebreathers"}] } 

但由于某种原因它没有连接。当我点击 minLength 后,搜索字段下方会打开一个小的空框,但里面什么也没有。

更新:当我添加“alert(item);”时在响应调用中,我收到一个窗口,显示“site.com 的页面显示:object Object”——这可能是问题所在吗?

请您参考如下方法:

感谢我问题下的提示评论,我终于弄清楚了。

在我从 Jquery UI 网站复制的返回中,我有:

label: item.name, 
value: item.name 

将其更改为:

label: item.label, 
value: item.value 

解决了我与 jQuery 的斗争。我不知道这是否是一个好的做法,但它终于起作用了!