jQuery El elemento de autocompletar no se ejecuta

Question

Tengo dos cuadros de texto (tipo de entrada de texto) en el mismo HTML que usan la misma función de autocompletar. El primer cuadro de texto funciona bien, pero el segundo cuadro de texto no representa los resultados. Se comunica con el servidor y obtengo los resultados, pero la función de renderizado ni siquiera se llama. La única diferencia entre las entradas es que uno está en un div que comienza oculto y se muestra amable como la ventana de Diálogo al establecer z-order high y enmascarar el HTML.

Aquí está el CSS para el div donde se encuentra el segundo cuadro de entrada.

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

La función de autocompletar:

$(".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); 
}; 

Las cajas de entrada usan la misma clase para llamar a la función de autocompletar.

<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> 

Alguna idea, por qué renderizar en un cuadro de entrada y no en el otro cuadro de entrada? Permítanme dejar en claro, en el segundo cuadro de entrada lo único que no funciona es la función renderItem que por alguna razón no se ejecuta. En la pantalla, puede ver una gran cantidad de indefinidos, pero si selecciona alguno de los valores indefinidos, el cuadro de entrada se llena con el valor correcto.

Answer 1

Todavía no sé cuál es la causa del problema, pero pude hacerlo funcionar usando la ID en lugar de utilizar una clase para acceder a la función de autocompletar. ¿Supongo que una función de renderización adjunta no puede compartirse entre dos cuadros de entrada? No sé, si alguien sabe la respuesta y puede compartir con nosotros, sería genial.

De todos modos, si alguien tiene el mismo problema extraño que yo y está atascado con el problema, así es como lo resolví. Como, no quería repetir el mismo código dos veces, moví toda la lógica de autocompletar a una var y la función de renderizado a otra var y usé el ID del cuadro de entrada para asignar autocompletar.

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

tuve un problema similar aplicando _renderItem() en un selector de clase, pero lo resolvió 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

Para mí, lo que fija que estaba utilizando la opción appendTo del jQuery UI AutoComplete.

Mi problema es que este campo de entrada estaba dentro de un modal que no se mostró al principio. Afectándolo al padre de la entrada se arregló el problema!

Answer 4

Tengo este error también. Es extraño que con id como selector _renderItem funcione correctamente. Encontré un truco rápido para este problema:

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