jquery ui 1.7 autocomplete show dialog on select

Question

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. Here 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.

Nick Craver · Accepted Answer · 2010-03-30 16:55:04Z

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();

Collectives™ on Stack Overflow

jquery ui 1.7 autocomplete show dialog on select

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related