title: Delaying jQuery UI autocomplete focus event
body: <p>I'm using an autocomplete widget from jQuery UI library version 1.8.23. My code looks like this:</p>
  
  <pre><code>$(this).autocomplete({
       autoFocus: true,
       minLength: 2,
       delay:     100,
       source:    function(request, response) {AutoCpl.getSource(request, response)},
       select:    function(e, ui)             {AutoCpl.getSelect( e, ui, $(this) )},
       open:      function(e, ui)             {AutoCpl.setOpen($(this))}
  });
  </code></pre>
  
  <p>After 100 ms delay I'm retrieving using AJAX call a list of products. Everything works fine but I have problem with focus event. I want to show product details when it's hovered on the select list. Because of large amount of data that need to be computed I can't return products details with product list at once. I need to use another AJAX call to get those information later on focus event. Because someone can hover over all product in one mouse move I can't make AJAX call and show every response. I have to be sure that someone really want to see details of a specific product, so I want to wait for a while with making that AJAX call.</p>
  
  <p>I was trying to use a jQuery debouce plug-in by Ben Alman but it won't work the way I want to (or maybe I'm just using it wrong). If I tried this way:</p>
  
  <pre><code>focus:     $.debounce(1000, App.getProductsDetails)
  </code></pre>
  
  <p>event was delayed by 1 sec (that's ok) but in the getProductsDetailt I didn't have access to event and ui objects.
  I tried another way:</p>
  
  <pre><code>focus:     function(e, ui){$.debounce(1000, App.getProductsDetails)}
  </code></pre>
  
  <p>this time getProductsDetails wasn't even called, which didn't surprised me much, because as far as I know debounce function must be bind to an event ie. $('#id').click($.debounce()).</p>
  
  <p>My question is how can I delay focus event and at the same time have access to objects return by focus event?</p>