Saisie semi-automatique dans jQuery 1.4.2 jQuery UI 1.8.3

Question

Je dois être épais parce que je ne peux pas pour la vie de moi obtenir jQuery autocomplete au travail. J'ai cherché beaucoup d'exemples, et il semble que la plupart d'entre eux utilisent une ancienne version de jQuery. J'ai trouvé un exemple assez bon directement à partir du site de l'interface utilisateur jQuery: http://jqueryui.com/demos/autocomplete/#remote-jsonp J'ai donc modélisé le mien après cet exemple. Lorsque je tape dans ma boîte de saisie, la petite boîte de saisie semi-automatique apparaît sous la boîte de saisie, mais il n'y a rien dans la boîte de saisie semi-automatique. Mes données ne sont pas chargées correctement par jQuery.

Ma source de données est une URL qui renvoie des données JSON. Exemple: [{"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"}}]

Mon code 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 } 
        }); 
       } 
      }); 
     } 
    }); 
}); 

Alors, quand je console.log(data) à Firebug, il montre l'objet avec toutes les données de tact. Je pense que je n'accède pas correctement à l'adresse dans mon code Javascript. Vraiment, je veux juste que l'adresse apparaisse dans la boîte de saisie semi-automatique. Comment puis-je faire cela?

Merci à l'avance,

Chris

Answer 1

je compris. Nécessaire pour parcourir le tableau d'objets json, puis placer les données dans un tableau. J'ai eu l'idée de retourner un tableau à partir du defualt exemple 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); 
        } 
      }); 
     } 
    }); 
}); 

Answer 2

Essayez:

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

En effet, la réponse attend un tableau comme argument. $ .map itère sur les éléments de données et forme un nouveau tableau de la valeur de retour à partir de la méthode mutator passée. Une fois cela fait, $ .map renvoie le nouveau tableau qui sera l'argument de response().

Answer 3

essayer

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

voir la source de cette demo