Evento di modifica automatica UI JQuery - azzeramento dell'ID selezione

Question

Sto utilizzando il widget UI completamento automatico per un modulo per consentire agli utenti di digitare un nome cliente. L'idea è che possono selezionare un cliente esistente e compilare altri campi nel modulo oppure possono liberare un nuovo cliente da creare. Quando un utente seleziona un cliente esistente, utilizzo l'evento select per popolare un input nascosto per memorizzare l'ID associato a tale cliente.

Il problema che sto riscontrando è se un utente seleziona prima un cliente dalla lista ma poi entra e modifica il testo, in effetti creando un nuovo cliente, devo essere in grado di cancellare quel valore dell'ID di input nascosto .

ho fatto riferimento alla this SO question e ha creato il seguente codice:

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

Il problema è che l'evento di modifica è sparato su blur, quindi se un utente seleziona un cliente, il valore di input nascosto è popolata, ma come appena spostano il focus dalla casella di input, vengono immediatamente cancellati. Tuttavia, se escludo l'evento blur dal test event.originalEvent.type, il valore del campo nascosto non viene mai ripristinato nello scenario originale in cui un utente modifica un valore precedentemente selezionato.

chiunque ha dovuto affrontare questo prima, e in tal caso è possibile offrire alcune indicazioni su come posso gestire valore di input nascosto in modo che sia popolato solo quando un elemento viene selezionato dalla lista e liquidati con qualsiasi altro valore?

Answer 1

Sembra che l'ho risolto abbastanza rapidamente da solo. Riferendosi alla JQuery UI wiki, la voce ui in caso change è lo stesso in caso select, così posso modificare il mio codice per leggere in questo modo:

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

Non c'è bisogno di testare per l'evento, solo per se c'è un elemento nell'argomento ui. L'impostazione dell'ID nell'evento select è probabilmente ridondante, ma per essere sicuro manterrò entrambi.

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