Evento de cambio de autocompletar JQuery UI - restablecimiento de la ID de selección

Question

Estoy utilizando el widget AutoComplete UI para un formulario que permita a los usuarios escribir un nombre de cliente. La idea es que pueden seleccionar un cliente existente y rellenar otros campos en el formulario, o pueden escribir libremente un nuevo cliente para crear. Cuando un usuario selecciona un cliente existente, utilizo el evento select para rellenar una entrada oculta para almacenar el ID asociado con ese cliente.

El problema que tengo es que si un usuario selecciona primero un cliente de la lista pero luego ingresa y edita el texto, en efecto, crea un nuevo cliente, necesito poder borrar ese valor de ID de entrada oculto .

que se refiere a this SO question y creó el siguiente código:

$(function() { 
      $("#customerName").autocomplete({ 
       source: "/Customers/CustomerListJSON", 
       minLength: 2, 
       select: function(event, ui) { 
        $("#customerId").val(ui.item ? ui.item.Id : ""); 
       }, 
       change: function(event, ui) { 
        try { 
         $("#trace").append(document.createTextNode(event.originalEvent.type + ", ")); 
         if (event.originalEvent.type != "menuselected") 
          $("#customerId").val(""); 
        } catch (err) { 
         $("#customerId").val(""); 
        } 
       } 
      }); 
     }); 

El problema es que el evento de cambio se disparó en blur, por lo que si un usuario selecciona un cliente, el valor de entrada oculta está poblado, sino como tan pronto como muevan el foco del cuadro de entrada, se borrará de inmediato. Sin embargo, si excluyo el evento blur de la prueba event.originalEvent.type, el valor del campo oculto nunca se restablece en el escenario original donde un usuario edita un valor previamente seleccionado.

Alguien ha tenido que hacer frente a esto antes, y si es así se puede ofrecer alguna orientación sobre cómo puedo gestionar el valor de esa entrada oculta por lo que está poblada única cuando se selecciona un elemento de la lista y se aclaró con cualquier otro valor?

Answer 1

Parece que he resuelto esto bastante rápido por mi cuenta. Refiriéndose a la JQuery UI wiki, el elemento ui en caso change es la misma que en el caso select, por lo que puede modificar mi código para leer así:

$(function() { 
    $("#customerName").autocomplete({ 
     source: "/Customers/CustomerListJSON", 
     minLength: 2, 
     select: function(event, ui) { 
      $("#customerOrganizationId").val(ui.item ? ui.item.Id : ""); 
     }, 
     change: function(event, ui) { 
      $("#customerOrganizationId").val(ui.item ? ui.item.Id : ""); 
     } 
    }); 
}); 

No hay necesidad de probar para el evento, sólo para si hay un elemento en el argumento ui. La configuración de ID en el evento select es probablemente redundante, pero para estar seguro voy a mantener ambos.

Answer 2

$(function() { 
$("#customerName").autocomplete({ 
    source: "/Customers/CustomerListJSON", 
    minLength: 2, 
    select: function(event, ui) { 
     $("#customerId").val(ui.item ? ui.item.Id : ""); 
    }, 
    change: function(event, ui) { 
     try { 
      $("#trace").append(document.createTextNode(event.originalEvent.type + ", ")); 
      if (event.originalEvent.type != "menuselected") 
       $("#customerId").val(""); 
     } catch (err) { 
      $("#customerId").val(""); 
     } 
    } 
}); 
});