title: jQuery UI Autocomplete
body: <p>I am using jQuery UI's autocomplete plugin and everything is well and good except for that fact that when a user <strong>clicks</strong> the value they want the function I have assigned to the &quot;select:&quot; method fires before the value of the field is changed.  So if I type &quot;Foo&quot; in the input field, then click the autocomplete match for &quot;Foo Bar&quot; the function detects the value as what was typed (in this case &quot;Foo&quot;) as opposed to the value which was selected from the autocomplete list.  Once the function fires (in this case I just have an alert box popup with <code>this.value</code>) the value of the input field is set to the value selected via the autocomplete list.  This problem does <em>not</em> occur if the user selects the option with the keyboard (arrow keys-&gt;tab), only when the mouse is used.</p>
  <pre><code>  $(function()
    {
      var aEmps = 
      [
  &lt;?php
  echo $sEmps;
  ?&gt;    
      ];
  
      $(&quot;#slast&quot;).bind( &quot;keydown&quot;, function( event ) {
        if ( event.keyCode === $.ui.keyCode.TAB &amp;&amp;
            $( this ).data( &quot;autocomplete&quot; ).menu.active ) 
            { event.preventDefault(); }
      })
      .autocomplete({
        source: aEmps,
        select: function(event, ui)
        {
          var aName = $(this).val();
          alert(aName);
        }
      })
    });
  </code></pre>
  <p>Since most users will be interacting with this using their mouse I have to find a way to get the value set before firing the &quot;select:&quot; function.  I believe I can accomodate for this by adding a condition to the statement prior to the auto complete but I need some help finding the right syntax.</p>