javascript - jquery ui 1.7 自动完成显示选择对话框

Question

我正在使用自动完成小部件，并且希望在选择项目时显示一个对话框。该对话框确实显示了，但我希望对话框中的一个字段在打开时接收焦点。这是我到目前为止所尝试过的:

//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");
                        }
        });


      });

我认为自动选择的默认行为仍在执行某些操作，因为自动选择小部件在显示对话框后接收焦点。

任何帮助将不胜感激。

Answer 1

尝试这样做来覆盖自动完成的行为:

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

这会将 .focus() 排队，以便在选择代码运行后运行。这就是自动完成正在做的事情(straight from the source code, line 604):调用您的选择(以及打开的函数)然后窃取焦点:

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