jQuery 1.4.2中的自動完成jQuery UI 1.8.3

我一定很沉重，因爲我不能爲了我的生活而讓jQuery自動完成工作。我已經搜索了很多很多的例子，而且似乎大多數的例子都使用了jQuery的老版本。我直接從jQuery UI站點找到了一個相當不錯的示例：http://jqueryui.com/demos/autocomplete/#remote-jsonp因此，我在該示例之後對我的模型進行了建模。當我輸入我的輸入框時，輸入框下方會彈出一個小自動填充框，但自動填充框中沒有任何內容。我的數據沒有被jQuery正確加載。jQuery 1.4.2中的自動完成jQuery UI 1.8.3

我的數據源是一個返回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，它顯示了在機智的所有數據對象。我想我不能在我的Javascript代碼中正確訪問「地址」。看到真的，我只想在自動填充框中彈出「地址」。我該怎麼做呢？

由於提前，

克里斯

來源

2010-08-16 ChrisJF

源我想通了。需要遍歷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); 
        } 
      }); 
     } 
    }); 
});

來源

2010-08-19 12:22:27 ChrisJF

嘗試：

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

事實上，響應期望的陣列作爲參數。 $ .map對數據項進行迭代，並通過傳遞的mutator方法形成一個新的返回值數組。一旦完成，$ .map返回新的數組，這將是response（）的參數。

來源

2010-08-16 20:26:47 BGerrissen

燁的想法，我想，之前（和試圖再次剛纔驗證），但它不工作。「自動完成」框仍然爲空。 – ChrisJF 2010-08-16 20:42:57

-1

嘗試

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

看到這個demo

來源

2010-08-16 22:58:30 Barakat

jQuery 1.4.2中的自動完成jQuery UI 1.8.3

回答

相關問題