循环通过JSON响应并返回Jquery

时间:2014-05-12 21:02:17

标签: javascript jquery json autocomplete

我几乎就在那里和我的第一个jquery自动完成脚本...我只需要一些帮助来弄清楚如何返回已创建的元素有链接,以便我们可以点击它们。

这是我的js代码的一部分:

$(document).ready(function() {
    var attr = $('#leseulsteve_lieuxbundle_lieutype_nom').attr('data-url');
    var searchRequest = null;

$("#leseulsteve_lieuxbundle_lieutype_nom").autocomplete({
    minLength: 3,
    source: function(request, response) {
        if (searchRequest !== null) {
            searchRequest.abort();
        }
        searchRequest = $.ajax({
            url: attr,
            method: 'get',
            dataType: "json",
            data: {nom: request.term},
            success: function(data) {
                searchRequest = null;
                console.log(data);

  $.each(data, function (i, v) {
  --- SOME VARIABLE I GUESS TO STORE THE RESULT ---
  });

  return THE 'SOME VARIABLE;

  }
}).fail(function() {
                searchRequest = null;
            });
    }
 });
});

在控制台中,我从console.log(数据)行获得了这个:

Object {École secondaire De Rochebelle: "/GestigrisC/app_dev.php/lieux/voir/2", École secondaire la Camaradière: "/GestigrisC/app_dev.php/lieux/voir/3"} 

我可以控制JSON提要的构建方式,所以不用担心它是否有助于为我构建那个超级神秘的变量返回。

非常感谢您的帮助!

2 个答案:

答案 0 :(得分:0)

如果您只想构建链接并将其添加到HTML中,那么我认为您正在寻找类似的内容:

success: function(data) {
  var html = '';
  $.each(data, function (i, v) {
    html += '<a href="'+v+'">'+i+'</a>';
  });
  $('#container_id').html(html);
}

答案 1 :(得分:0)

说得对,谢谢你的帮助:)。

$(document).ready(function() {
var attr = $('#leseulsteve_lieuxbundle_lieutype_nom').attr('data-url');
var searchRequest = null;

$("#leseulsteve_lieuxbundle_lieutype_nom").autocomplete({
    minLength: 3,
    source: function(requete, reponse) {
        if (searchRequest !== null) {
            searchRequest.abort();
        }
        searchRequest = $.ajax({
            url: attr,
            method: 'get',
            dataType: "json",
            data: {nom: requete.term},
            success : function(donnee){
            reponse($.map(donnee, function(objet){
            return {label: objet.type +  ' | ' + objet.label, type: objet.type, id: objet.id};
            }));
        }
        }).fail(function() {
            searchRequest = null;
        });
},
select: function (event, ui) {
    $('#leseulsteve_lieuxbundle_lieutype_nom').val(ui.item.label);
    $('#leseulsteve_lieuxbundle_lieutype_type').val(ui.item.type);
    $('#leseulsteve_lieuxbundle_lieutype_id').val(ui.item.id);
    $('#formulaire').submit();
}
});
});