Impossibile impostare la proprietà '_renderItem' di incompleto jQuery UI completamento automatico con HTML

Question

Sto usando il codice seguente per rendere i miei elementi autocompletamento dell'interfaccia utente jQuery come HTML. Gli oggetti vengono visualizzati correttamente nel controllo di completamento automatico, ma continuo a ricevere questo errore javascript e non posso oltrepassarlo.

Firefox Impossibile convertire argomento JavaScript

Chrome Impossibile impostare la proprietà '_renderItem' di indefinito

donor.GetFriends(function (response) { 
    // setup message to friends search autocomplete 
    all_friends = []; 
    if (response) { 
     for (var i = 0; i < response.all.length - 1; i++) {     
       all_friends.push({ 
        "label":"<img style='padding-top: 5px; width: 46px; height: 46px;' src='/uploads/profile-pictures/" + 
         response.all[i].image + "'/><br/><strong style='margin-left: 55px; margin-top: -40px; float:left;'>" + 
         response.all[i].firstname + " " + response.all[i].lastname + "</strong>", 

        "value":response.all[i].firstname + " " + response.all[i].lastname, 
        "id":response.all[i].user_id}); 
      } 
     }   

    $('#msg-to').autocomplete({ 
     source:all_friends, 
     select:function (event, ui) {    
      // set the id of the user to send a message to 
      mail_message_to_id = ui.item.id; 
     } 

    }).data("autocomplete")._renderItem = function (ul, item) { 
     return $("<li></li>") 
      .data("item.autocomplete", item) 
      .append($("<a></a>").html(item.label)) 
      .appendTo(ul); 
    }; 
}); 

Non certo perché si sta gettando questo errore, o che cosa devo fare per superarlo ... Qualsiasi aiuto è apprezzato.

Answer 1

Da quando sono appena iscritto e non può commentare drcforbin postale s' sopra, immagino Devo aggiungere la mia risposta.

drcforbin è corretto, anche se è davvero un problema diverso rispetto a quello che l'OP aveva. Chiunque entri in questa discussione ora sta probabilmente affrontando questo problema a causa della nuova versione di jQuery UI appena rilasciata. Alcune convenzioni di denominazione relative al completamento automatico erano deprecate nell'interfaccia utente jQuery nella v1.9 e sono state completamente rimosse nella versione 1.1 (vedere http://jqueryui.com/upgrade-guide/1.10/#autocomplete).

Ciò che è fonte di confusione, tuttavia, è che accennano solo la transizione dal item.autocomplete tag dati ui-autocomplete-item, ma il completamento automatico variabile di dati è stato anche rinominato UI- completamento automatico. Ed è ancora più confuso perché i demo stanno ancora usando la vecchia sintassi (e quindi sono danneggiati).

Quello che segue è ciò che deve cambiare in funzione di _renderItem per jQuery UI 1.10.0 nel Custom Data demo qui: http://jqueryui.com/autocomplete/#custom-data

Codice originale:

.data("autocomplete")._renderItem = function(ul, item) { 
    return $("<li>") 
    .data("item.autocomplete", item) 
    .append("<a>" + item.label + "<br>" + item.desc + "</a>") 
    .appendTo(ul); 
}; 

codice fisso:

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

Annotare le modifiche per il completamento automatico e item.autoco completo. Ho verificato che questo funziona nei miei progetti.

Answer 2

Ho incontrato lo stesso problema ... sembra nelle versioni successive, deve essere .data("ui-autocomplete") invece di .data("autocomplete")

Answer 3

A seconda della versione di jQuery UI si sta utilizzando o sarà "autocomplete" o "ui-autocomplete", ho fatto questo aggiornamento per il plug-in combobox per risolvere il problema (~ ln 78-85)

var autoComplete = input.data("ui-autocomplete"); 
if(typeof(autoComplete) == "undefined") 
    autoComplete = input.data("autocomplete"); 

autoComplete._renderItem = function(ul, item) { 

...

Answer 4

sto usando jQuery 1.10.2 e lavorare utilizzando:

.data("custom-catcomplete")._renderItem = function(ul, item) { 
    return $("<li>") 
    .data("ui-autocomplete-item", item) 
    .append("<a>" + item.label + "<br>" + item.desc + "</a>") 
    .appendTo(ul); 
}; 

Answer 5

e ora, con jQuery-2.0.0, è il nome del tuo nuovo modulo, ma sostituisce il "." (punto) dal "-" (trattino):

jQuery.widget ('custom.catcomplete', jQuery.ui.autocomplete, { 
    '_renderMenu': function (ul, items) { 
     // some work here 
    } 
}); 

$this.catcomplete({ 
    // options 
}).data('custom-catcomplete')._renderItem = function (ul, item) {} 

Answer 6

Pubblicare per il bene di qualsiasi persona che inciampa in questo post.

Questo errore sarà anche manifestarsi se non metti la .autocomplete all'interno della manifestazione pronto documento.

Il codice qui sotto fallirà:

<script type="text/javascript"> 
    $('#msg-to').autocomplete({ 
     source:all_friends, 
     select:function (event, ui) {    
      // set the id of the user to send a message to 
      mail_message_to_id = ui.item.id; 
     } 

    }).data("autocomplete")._renderItem = function (ul, item) { 
     return $("<li></li>") 
      .data("item.autocomplete", item) 
      .append($("<a></a>").html(item.label)) 
      .appendTo(ul); 
    }; 
</script> 

mentre il codice qui sotto funzionerà:

<script type="text/javascript"> 
    $(function(){ 
     $('#msg-to').autocomplete({ 
      source:all_friends, 
      select:function (event, ui) {    
       // set the id of the user to send a message to 
       mail_message_to_id = ui.item.id; 
      } 

     }).data("autocomplete")._renderItem = function (ul, item) { 
      return $("<li></li>") 
       .data("item.autocomplete", item) 
       .append($("<a></a>").html(item.label)) 
       .appendTo(ul); 
     }; 
    }); 
</script> 

Answer 7

So di essere in ritardo con la mia risposta, ma se la gente in futuro ancora non get

 
.data("ui-autocomplete-item", item) 

a lavorare quindi provare questo insted

$(document).ready(function(){ 
$('#search-id').autocomplete({ 
    source:"search.php", 
    minLength:1,  
    create: function() { 
    $(this).data('ui-autocomplete')._renderItem = function (ul, item) { 
     return $('<li>') 
     .append("<a>" + item.value + ' | ' + item.label + "</a>") 
     .appendTo(ul); 
    }; 
    } 
}) 
}); 

ha funzionato per me e ho avuto problemi con la funktion login .. non ho potuto accedere perché ha detto

 
Uncaught TypeError: Cannot set property '_renderItem' of undefined 

Spero che questo aiuta qualcuno :)

/kahin