自動完成的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

您應該調用響應回調並以文檔中提到的可接受格式傳遞結果。

例如：

$('#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;
  }
});