JQuery UI Autocomplete-Änderungsereignis - Zurücksetzen der Auswahl ID

Question

Ich verwende das AutoVervollständigen-UI-Widget für ein Formular, damit Benutzer einen Kundennamen eingeben können. Die Idee ist, dass sie entweder einen bestehenden Kunden auswählen und andere Felder im Formular ausfüllen können, oder sie können einen neuen Kunden frei geben, der erstellt werden soll. Wenn ein Benutzer einen vorhandenen Kunden auswählt, verwende ich das Ereignis select, um eine versteckte Eingabe zu füllen, um die mit diesem Kunden verknüpfte ID zu speichern.

Das Problem, das ich habe, ist, wenn ein Benutzer zunächst einen Kunden aus der Liste auswählt, dann aber den Text bearbeitet und bearbeitet und damit einen neuen Kunden erstellt, muss ich den versteckten Eingabe-ID-Wert löschen können .

I bezeichnet this SO question und erstellt den folgenden Code:

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

Das Problem ist, dass das Änderungsereignis auf blur abgefeuert wird, so dass, wenn ein Benutzer einen Kunden wählt, der versteckte Eingabewert gefüllt wird, sondern als sobald sie den Fokus von der Eingabebox wegbewegen, wird sie sofort gelöscht. Wenn ich jedoch das blur-Ereignis vom event.originalEvent.type-Test ausschließe, wird der Wert des versteckten Felds im ursprünglichen Szenario, in dem ein Benutzer einen zuvor ausgewählten Wert bearbeitet, nie zurückgesetzt.

Hat jemand hatte diese vor zu bekämpfen, und wenn ja, können Sie einige Hinweise geben, wie ich diesen Wert verborgenen Eingang verwalten, so dass es nur bevölkert ist, wenn ein Element aus der Liste ausgewählt und mit einem anderen Wert gelöscht?

Answer 1

Sieht so aus, als hätte ich das ziemlich schnell alleine gelöst. Unter Bezugnahme auf die JQuery UI wiki, das ui Element in der change Veranstaltung ist das gleiche in dem select Fall, so kann ich meinen Code ändern wie folgt zu lesen:

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

Es gibt keine Notwendigkeit für den Fall zu prüfen, nur für ob es einen Artikel im ui Argument gibt. Die ID-Einstellung im select Event ist wahrscheinlich überflüssig, aber um sicher zu sein, werde ich beides behalten.

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