title: jquery ui autocomplete change/close event
body: <p>I am using jQuery UI autocomplete in one of my project.</p>
  
  <h2>my purpose</h2>
  
  <p><strong>i want that whenever user leaves the textbox on which the autocomplete box appears , the handler will check that the whatever value user entered in the textbox must be one of the value from the source array of the autocomplete box, if it is no then handler will prompt an error and set focus again to this textbox.</strong></p>
  
  <h2>For example</h2>
  
  <pre><code>var customerNames = ['CA','BA','DA','AA'];
  
  $('#customer').autocomplete({
       source: customerNames,
       change : function(event,ui){
           // handles event
       }
  });
  </code></pre>
  
  <p>now suppose customer entered value does not exactly match (case insensitive) any of the value from the array then it prompts the error.</p>
  
  <p>it should works fine but only when the user changes some value , suppose as a user i put only a in the customer textbox and then blur the textbox the handler prompt me the message , set focus back to customer textbox , then if i again blur from it the change/close event will not fire as per the jQuery doc because the value of the textbox is not changed.</p>
  
  <h2>My Question</h2>
  
  <p>how can i override the default behaviour of change/close event so then they will be triggered every time irrespective of the changes made by the user ?</p>
  
  <pre><code>                   OR
  </code></pre>
  
  <p>any other way to accomplish my goal ?</p>
  
  <p>please feel free to ask me questions.</p>
  
  <h2>Updated on 05-JULY-2013</h2>
  
  <p>based on the @roasted comment i implement my solution as the following. please give me any suggestions if anybody has about.</p>
  
  <pre><code>$('#customer').autocomplete( {
                          source : function(request, resolve) {
                              // fetch new values with request.term
                              resolve(customerNames);
                          }
                      });// ends customer autocomplete
  
                     $("#customer").blur(function(){
  
                          var inputText = this.value;
  
                          if(inputText === '' || inputText.length == 0){
                              return;
                          }
  
                          if(checkAvailable(inputText,customerNames)){
                              return;
                          }else{
                              alert(" you have to select one of the value \n from given box.");
                                  setTimeout(function(){
                                      $('#customer').val('');
                                      $('#customer').focus();         
                                  },10);
                          }
                     });// ends customer blur
  </code></pre>
  
  <p>and i have slightly modified following function</p>
  
  <pre><code>function checkAvailable(term,availableTags) {
  
      var length = term.length,
           term = term.toLowerCase();
  
       for (var i = 0, z = availableTags.length; i &lt; z; i++)
       if (availableTags[i].toLowerCase() === term) return true;
  
  
       return false;
   }
  </code></pre>
  
  <p>Thanks                                                                                                                                                                                Mihir </p>