jQuery Custom Autocomplete load with jQuery Validate

Question

It may sound like a very minor issue.

I have a voting system with many text fields where survey taker enters the name.

Each of the input box has been initialized with autocomplete.

There's also jQuery Validates running on the form where I have to use .addMethod to validates them dynamically base on the sibling input fields.

The following validator make sure that the user don't enter the same names that was enter in the sibling input boxes and at the same time is from the list of pro_names.

Here is the $.validator.addMethod:

         $.validator.addMethod("professional", function(value, element) {
          var chosen_names = [];
          var chosen_inputs = $(element).siblings('input:text');
          //gets the list of already selected names
          $.each(chosen_inputs, function(index, professional){
            chosen_names.push($(professional).val());
          });

          if(($.inArray(value, pro_names) != -1 && $.inArray(value, chosen_names) == -1) || value == "" || value == pro_type){
            if(field.siblings('div.error-icon').length > 0 && field.siblings('input.error').length == 0){
              field.siblings('div.error-icon').remove();
            }
            return true
          }else{
            if(field.siblings('div.error-icon').length == 0){
              field.parent().append("<div class='error-icon'><img src='/images/invalid.png'/> Invalid!</div>");
            }
            return false
          }
     }, "");

Note: pro_names are the list of names that was set outside of this method.

It works fine if you use keyboard to select name from the field. However, when you use mouse to click on the list of selection. Validation failed and the field is highlighted.

As soon as you click out of the box or tab into another area of the page, the validation passed.

I've tried using an event trigger(s) outside to wrap this method around but it seems to be not related. (It didn't solve the problem)

Any clues?