jquery ui 1.7 autocomplete show dialog on select

I am using an autocomplete widget, and would like a dialog to show when an item is selected. The dialog does show up, but I want a field in the dialog to receive focus when it opens. Her开发者_JAVA技巧e is what I have tried so far:

//HTML

<form action="#">
  <p><input id="busca" /></p>
</form>
<div id="agregar" title="Agregar Parte">
  <label for="cantidad">Cantidad:</label>
  <input name="cantidad" id="cantidad" size="3" />
</div>

//jquery

 $(function(){

        $("#agregar").dialog({
                        autoOpen: false,
                        //also tried open: function(){$("#cantidad").focus()}
                        }
              );      
        //.bind("dialogfocus", ... ) does not work either
        $("#agregar").bind("focus", function(){
                   $("#cantidad").focus(); });

    $("#busca").autocomplete({
            source: "/carrito/autocomplete/",
            minLength: 1,
                        select: function(e, ui) {
                          $("#agregar").dialog("open");
                        }
        });


      });

I think autoselect's default behavior is still doing something as the autoselect widget receives focus after the dialog is shown.

Any help would be greatly appreciated.

Try this to override the autocomplete's behavior:

$("#agregar").dialog({
  autoOpen: false,
  open: function(){
      setTimeout(function() { $("#cantidad").focus(); }, 0);
  }
});

This queues the .focus() to run after the select code has run. This is what autocomplete is doing (straight from the source code, line 604): calling your select (and that open function) then stealing focus back:

select();
// TODO provide option to avoid setting focus again after selection? 
// useful for cleanup-on-focus
input.focus();