автозаполнение jquery с пользовательскими данными

Question

Я пытаюсь использовать плагин jQuery «автозаполнение» с пользовательскими данными. Это не работает в моем коде.

Звонок ajax отлично работает, я вижу ответ. Но ответ не отображается на странице.

Отклик что-то вроде следующего:

[{"id_pseudo":12,"nom":"COLLINS","prenom":"Phil","image":"images\/avatar_48x48.png"}] 

Мой JS код:

$('#rechercher_ami').autocomplete({ 
    source : function(requete, reponse){ 
     $.ajax({ 
      url : $('#url_for_ajax').val() + '/getRechercherAmiAjax', 
      dataType : 'json', 
      data : {ami : $('#rechercher_ami').val(), maxRows : 15}, 
      beforeSend : function() {$('#waiting_autocomplete').show();}, 
      success : function(donnee){ 

       $('#waiting_autocomplete').hide(); 

      } 
     }); 
    }, 
    minLength: 3, 
    delay:500, 

    select: function(event, ui) { 
     alert('hello'); 
     return false; 
     } 
}) 

$('#rechercher_ami').data("ui-autocomplete")._renderItem = function(ul, item) { 
    return $("<li>") 
    .append("<a>" + item.nom + "<br>" + item.prenom + "</a>") 
    .appendTo(ul); 
}; 

Что плохого в этом коде?

Answer 1

Вы должны вызвать ответный ответ и передать результат в принятом формате, указанном в documentation.

Например:

$('#rechercher_ami').autocomplete({ 
    source: function(request, response) { 
    $.ajax({ 
     url: $('#url_for_ajax').val() + '/getRechercherAmiAjax', 
     dataType: 'json', 
     data: { 
     ami: request.term, 
     maxRows: 15 
     }, 
     beforeSend: function() { 
     $('#waiting_autocomplete').show(); 
     }, 
     success: function(data) { 
     $('#waiting_autocomplete').hide(); 
     var result = $.map(data,function(item){ // form the data as you wish 
      return { 
        label:item.nom, 
        value:item.id_pseudo 
       }; 
      }); 
     response(result); // must pass valid data to response call back 
     } 
    }); 
    }, 
    minLength: 3, 
    delay: 500, 

    select: function(event, ui) { 
    alert('hello'); 
    return false; 
    } 
});