2012-09-14 54 views
2

要求:jQuery的自动完成防止焦点选择后

我想一个jQuery自动完成元件,其允许用户挑选一个项目,并设置显示字段和隐藏字段与所选择的值。但我也想现场和隐藏字段为当输入字段用户接收焦点清除。

问题:

我现在面临的问题是,当用户选择它几乎像jQuery正在执行ONSELECT功能,然后发送焦点到输入字段这再次激发我的重点项目( )事件(并因此清除我的选择)。

问题的浏览器:

IE8,作品在Chrome中。没有尝试别人。

尝试的修复:

  • 我试图将焦点设置到另一个元件在select() 功能。它确实把重点放在那个元素上,但是只有在 专注于输入字段
  • 在 select()方法中尝试了event.preventDefault()event.stopPropagation()。不工作。
  • 模糊没有工作无论是。

解决方法:

我想我可以改变的空地上点击,而不是焦点,但是这不是我想要的。

类似计算器线程:

jquery autocomplete remove focus after suggest

代码: 这里是我的代码:

$(function() { 
    $("#autosuggest").autocomplete({ 
     source: "my server path", 
     minLength: 3, 
     select: function (event, ui) { 
      if (ui.item) { 
       $("#autosuggest").val(ui.item.value);      
       $("#hidden").val(ui.item.id);                     
      } 
     } 
    }); 
    $("#autosuggest").focus(function() { 
     $("#hidden").val(""); 
     this.value = ""; 
    }); 

}); 
+0

你见过这个http://stackoverflow.com/questions/2870077/jquery-autocomplete-select-firing-after-change?rq=1? – j08691

+0

@ j08691感谢您的回复,我确定所提示的线程与我的问题相同,该帖子似乎涉及防止发生更改事件,而我希望将焦点传递给输入以外的任何内容字段在用户选择一个项目之后。 –

回答

2

的问题是:当你点击自动完成建议,焦点然后转移到该下拉菜单,以便稍后返回到您的输入。如果您使用向下箭头按钮选择自动填充建议,是否仍然遇到此问题?如果你不这样做,那么这就是问题所在。

我可以看到解决这个问题的唯一方法并不是让它成为焦点事件,但我想我知道为什么你不想让它成为一个单击事件:你也想捕捉到标签到领域。

解决方案:让一个单击处理程序,并添加一个“KEYUP”处理程序,执行click处理程序处理程序,如果其中的关键是一个选项卡(下箭头键等仍然是允许的)。

+0

感谢您的回复。你是对的,它在使用箭头键时工作。它的作用是因为使用箭头键时,焦点从不会真正离开输入字段,即使很短时间也不会。这是因为使用箭头键,我仍然可以在输入栏上闪烁光标。而且,即使它确实为最简短的时刻留下了焦点,将焦点返回到输入字段的行为也会激发focus()方法。 –

+0

是的,你发现你为什么不想要一个简单的点击处理程序的原因,因为我想捕获手机上的标签和“下一步”按钮。 –

+0

您的解决方案无疑是可行的,并感谢您的聪明才智。我现在将实现它,但它似乎相当昂贵,因为现在JS引擎必须为每个键执行2个处理程序,一个用于“选项卡”侦听器,另一个用于jquery自动建议列表构建器。好吧!我希望在select()函数中有一个更简单的方法。谢谢你的时间和想法:) –

0

尝试ONSELECT功能..

$(function() { 
    $("#autosuggest").autocomplete({ 
     source: "my server path", 
     minLength: 3, 
     select: function (event, ui) { 
      if (ui.item) { 
       $("#autosuggest").val(ui.item.value);      
       $("#hidden").val(ui.item.id);                     
      } 
     }, 
     onSelect: function (suggestion) { 
     $(this).click();} 
    }); 
    $("#autosuggest").focus(function() { 
     $("#hidden").val(""); 
     this.value = ""; 
    }); 

});