代码之家 › 专栏 › 技术社区 › ChrisJF

jquery 1.4.2 jquery ui 1.8.3中的自动完成功能

autocomplete json jquery

ChrisJF · 技术社区 · 16 年前

我一定很胖,因为我不能让jquery自动完成工作。我已经搜索了许多示例,其中大多数都使用了旧版本的jquery。我直接从jquery用户界面站点找到了一个相当好的例子: http://jqueryui.com/demos/autocomplete/#remote-jsonp 所以我用那个例子来模拟我的模型。当我在输入框中输入时,小自动完成框会弹出在输入框下面,但自动完成框中没有任何内容。jquery没有正确加载我的数据。

我的数据源是一个返回JSON数据的URL。例子: [{"pk": 1, "model": "concierge.location", "fields": {"online": false, "link": "", "email": "", "address": "TBA"}}, {"pk": 2, "model": "concierge.location", "fields": {"online": false, "link": "", "email": "", "address": "UB 2008"}}]

我的javascript代码:

$(document).ready(function() {
    $("input#id_location_address").autocomplete({
        max: 10,

        source: function(request, response) {               
            $.ajax({
                url: "/concierge/autocomplete/locations/",
                dataType: "json",
                data: request,
                success: function( data ) {
                    console.log( data )
                    response( data, function(item) {
                        return { label: item.address, value: item.address }
                    });
                }
            });
        }
    });
});

所以当我 console.log(data) 在Firebug中,它用tact显示对象的所有数据。我认为我没有在我的javascript代码中正确地访问“地址”。真的,我只想在自动完成框中弹出“地址”。我该怎么做?

事先谢谢,

克里斯

3 回复 | 直到 16 年前

ChrisJF 16 年前

我知道了。需要遍历JSON对象数组,然后将数据放入数组中。我从defualt jquery ui示例中得到了返回数组的想法 http://jqueryui.com/demos/autocomplete/#default

$('input#id_location_address').keyup( function() {
    $("input#id_location_address").autocomplete({
        source: function(request, response) {
            $.ajax({
                    url: "/concierge/autocomplete/locations/",
                    dataType: "json",
                    data: request,
                    success: function( data ) {
                        // loop through data and return as array
                        items = new Array();
                        for(item in data) items.push( data[item].fields.address );
                        response( items );
                    }
            });
        }
    });
});

BGerrissen 16 年前

尝试:

response($.map(data, function(item) {
    return {
        label: item.fields.address, // item.FIELDS ;)
        value: item.fields.address
    }
}));

实际上,响应需要一个数组作为参数。.map迭代数据项,并从传递的mutator方法形成一个新的返回值数组。一旦完成,$.map返回新数组,该数组将是response()的参数。

-1

Barakat 16 年前

尝试

response($.map(data, function(item) {
    return {
        label: item.fields.address,
        value: item.fields.address
    }
}));

看看这个的来源 demo