jQuery L'elemento di rendering incompleto non viene eseguito

Question

Ho due caselle di testo (testo del tipo di input) sullo stesso codice HTML che utilizzano lo stesso completamento automatico. La prima casella di testo funziona correttamente, ma la seconda casella di testo non esegue il rendering dei risultati. Comunica con il server e ottengo i risultati, ma la funzione di rendering non viene nemmeno chiamata. L'unica differenza tra gli input è che uno è in un div che inizia nascosto e io mostro gentile come finestra Dialog impostando z-order alto e mascherando l'HTML.

Ecco il CSS per il div dove si trova la seconda casella di input.

.windowBooking { 
     position:absolute; 
     width:450px; 
    /* height:200px; */ 
     display:none; 
     z-index:9999; 
     padding:20px; 
    } 

La funzione di completamento automatico:

$(".makeClass").autocomplete({ 
    source: function (request, response) { 
     $('#Code').val(); //clear code value 
     $.ajax({ 
      url: "myUrl", 
      type: 'POST', 
      contentType: "application/json; charset=utf-8", 
      dataType: 'json', //What kind of Result is expected. (Ex json, xml, etc) 
      data: "{'searchItem':'" + request.term + "'}", 
      success: function (data) { 
       var item = []; 
       var len = data.d.length; 
       for (var i = 0; i < len; i++) { 
        var obj = { name: data.d[i].MakeReport, code: data.d[i].MakeCode }; 
        item.push(obj); 
       } 
       response(item); 
      } 
     }) 
    }, 
    focus: function (event, ui) { 
     $(this).val(ui.item.name); 
     return false; 
    }, 
    select: function (event, ui) { 
     $('#Code').val(ui.item.code); 
     $('#Name').val(ui.item.name); 
     $(this).val(ui.item.name); 
     return false; 
    }, 
    open: function() { 
     $(this).removeClass("ui-corner-all").addClass("ui-corner-top"); 
    }, 
    close: function() { 
     $(this).removeClass("ui-corner-top").addClass("ui-corner-all"); 
    }, 
    minLength: 2, 
    delay: 250 
}).data("autocomplete")._renderItem = function (ul, item) { 
    var temp = item.name; 
    return $("<li></li>") 
       .data("item.autocomplete", item) 
       .append("<a>" + item.name + "</a>") 
       .appendTo(ul); 
}; 

I campi di immissione utilizzano la stessa classe per chiamare il completamento automatico.

<input id="OtherMake" type="text" maxlength="30" size="20" class="makeClass"/> <!-- It works --> 

    <div id="dialogPlus" class="windowBooking"> 
            : 
    <input type="text" id="MakeName" class="makeClass" /> <!-- doesn't work.--> 
            : 
</div> 

Qualche idea, perché eseguire il rendering su una casella di input e no nell'altra casella di input? Lasciatemi chiarire, sulla seconda casella di input l'unica cosa che non funziona è la funzione renderItem che per qualche motivo non viene eseguita. Sullo schermo, è possibile visualizzare un numero indefinito ma se si seleziona uno dei valori non definiti, la casella di immissione viene riempita con il valore corretto.

Answer 1

Ancora non so quale sia la causa del problema, ma sono riuscito a farlo funzionare utilizzando l'ID anziché utilizzare una classe per accedere al completamento automatico. La mia ipotesi è che una funzione di rendering aggiunta non possa essere condivisa tra due caselle di input? Non lo so, se qualcuno conosce la risposta e potrebbe condividere con noi, sarebbe fantastico.

In ogni caso, se qualcuno ha lo stesso strano problema di me ed è bloccato con il problema, ecco come ho risolto. Come, non volevo ripetere lo stesso codice due volte, ho spostato tutta la logica di autocompletamento in una var e la funzione di rendering in un'altra var e ho usato l'ID della casella di input per assegnare il completamento automatico.

var makeAutocomplete = { 
     source: function (request, response) { 
      $('#Code').val(); //clear code value 
      $.ajax({ 
       url: myUrl, 
       type: 'POST', 
       contentType: "application/json; charset=utf-8", 
       dataType: 'json', //What kind of Result is expected. (Ex json, xml, etc) 
       data: "{'searchItem':'" + request.term + "'}", 
       success: function (data) { 
        var item = []; 
        var len = data.d.length; 
        for (var i = 0; i < len; i++) { 
         var obj = { name: data.d[i].MakeReport, code: data.d[i].MakeCode }; 
         item.push(obj); 
        } 
        response(item); 
       } 
      }) 
     }, 
     focus: function (event, ui) { 
      $(this).val(ui.item.name); 
      return false; 
     }, 
     select: function (event, ui) { 
      $('#Code').val(ui.item.code); 
      $('#Name').val(ui.item.name); 
      $(this).val(ui.item.name); 
      return false; 
     }, 
     open: function() { 
      $(this).removeClass("ui-corner-all").addClass("ui-corner-top"); 
     }, 
     close: function() { 
      $(this).removeClass("ui-corner-top").addClass("ui-corner-all"); 
     }, 
     minLength: 2, 
     delay: 250 
    }; 

    var renderList = function (ul, item) { 
     return $("<li></li>") 
       .data("item.autocomplete", item) 
       .append("<a>" + item.name + "</a>") 
       .appendTo(ul); 
    }; 

    $("#OtherMake").autocomplete(makeAutocomplete).data("autocomplete")._renderItem = renderList; 
    $("#MakeName").autocomplete(makeAutocomplete).data("autocomplete")._renderItem = renderList; 

Answer 2

ho avuto un problema simile applicando _renderItem() su un selettore di classe, ma risolto con

$.each($(".makeClass"), function(index, item) { 
     $(item).data("autocomplete")._renderItem = function (ul, item) { 
     return $("<li></li>") 
       .data("item.autocomplete", item) 
       .append("<a>" + item.value + " - " + item.label + "</a>") 
       .appendTo(ul); 
     }; 
      }); 

Answer 3

Per me, quello fissato stava usando l'opzione appendTo dal jQuery UI AutoComplete.

Il mio problema era che questo campo di input era all'interno di una modale che non era stata mostrata all'inizio. Colpendo per il genitore dell'input risolto il problema!

Answer 4

Ho anche questo errore. È strano che con id come selector _renderItem funzioni correttamente. Ho trovato un trucco rapido per questo problema:

$.ui.autocomplete.prototype._renderItem = function (ul, item) {}