Question

I am using jQuery Autocomplete to do a product lookup. I am using the following code to enforce selection from a list:

$(".force-selection").blur(function(e) {
  var value = $(this).val();
  //check if the input's value matches the selected item
  alert($(this).val());
  alert($(this).data('selected-item'));
  if(value != $(this).data('selected-item')) {
    //they don't, the user must have typed something else
    $(this)
      .val('') //clear the input's text
      .data('selected-item', ''); //clear the selected item
  }
});

The above code ONLY works when the two alert statements are removed. Why would the behavior change based only upon the presence of a couple of alert statements?

Answer 1

Try switching to use the Autocomplete change event instead of the blur event.

• Either as an init option when creating the Autocomplete:

  $(".selector").autocomplete({
     change: function(event, ui) { ... }
  });
  

• Or bind to the change event by type: autocompletechange.

  $(".selector").bind("autocompletechange", function(event, ui) {
     ...
  });