title: JQuery UI autocomplete change event - resetting selection ID
body: <p>I'm using the AutoComplete UI widget for a form to allow users to type in a customer name.  The idea is that they can either select an existing customer and populate other fields in the form, or they can free-type a new customer to be created.  When a user selects an existing customer, I use the <code>select</code> event to populate a hidden input to store the ID associated with that customer.</p>
  
  <p>The problem I'm having is if a user first selects a customer from the list but then goes in and edits the text, in effect creating a new customer, I need to be able to clear out that hidden input ID value.</p>
  
  <p>I referred to <a href="https://stackoverflow.com/questions/2820338/jquery-ui-autocomplete-event-change">this SO question</a> and created the following code:</p>
  
  <pre><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("");
                      }
                  }
              });
          });
  </code></pre>
  
  <p>The problem is that the change event is fired on <code>blur</code>, so if a user selects a customer, the hidden input value is populated, but as soon as they move focus off the input box it's cleared right away.  However, if I exclude the <code>blur</code> event from the <code>event.originalEvent.type</code> test, then the hidden field's value never gets reset in the original scenario where a user edits a previously-selected value.</p>
  
  <p>Has anyone had to tackle this before, and if so can you offer some guidance on how I can manage that hidden input's value so it's populated <em>only</em> when an item is selected from the list and cleared with any other value?</p>