jQuery：将焦点放在可搜索的下拉列表上答案

【问题标题】：jQuery: giving focus to searchabledropdownjQuery：将焦点放在可搜索的下拉列表上
【发布时间】：2012-11-27 17:05:05
【问题描述】：

我正在使用 jQuery 插件 searchabledropdown，它本质上将 <select> 选择元素转换为 input 字段，在您键入时显示结果（它看起来和行为仍然像下拉选择不过！）。

现在我想将焦点传递给这样一个转换后的元素。我做了什么：

我在 Chrome 网络工具中查找了上述元素，
然后写了一个匹配的 jQuery 选择器，
终于叫focus()就可以了。

我的代码似乎适用于其他元素（尝试使用 未转换，常规 <select> 元素，它工作正常）。

jQuery(".map-searchbox input").focus();

但是，将焦点放在由 searchabledropdown 创建的 input 元素不起作用......这是转换后的 html 元素的轮廓。（对不起所有的风格垃圾，但我不确定它是否重要......）

<div class="map-hudbox map-searchbox">
  <select class="searchselect" style="text-decoration: none; width: 163px; height: 19px;">
    <option value="...">...</option>
    ...
  </select> 
  <input type="text" style="height: 17px; position: absolute; top: 0px; left: 0px; margin: 0px; padding: 2px 0px 0px 3px; outline-style: none; border-style: solid solid none; border-color: transparent; background-color: transparent; border-left-width: 1px; border-top-width: 1px; font-size: 12px; font-variant: normal; font-weight: normal; color: rgb(68, 68, 68); text-align: -webkit-auto; text-indent: 0px; text-shadow: none; text-transform: none; width: 140px; z-index: 2;">
  <div style="position: absolute; top: 0px; left: 0px; width: 165px; height: 19px; background-color: rgb(255, 255, 255); opacity: 0.01; z-index: 1;"></div>
</div>

input 和底部 div 元素是由 searchabledropdown 插件从顶部的 select 创建的元素。 input 字段是我希望重点关注的内容。

知道为什么普通的.focus() 调用没有帮助吗？

我们将不胜感激！ :)

附言为了避免检查 jQuery 选择器的常见建议：选择器有效，如果通过 Chrome JS 控制台打印出来，我会准确地显示上面列出的 input 元素。

【问题讨论】：

标签： jquery select input focus

【解决方案1】：

我认为 input 标签上的 css 属性 outline-style: none; 使它看起来好像输入没有聚焦，而实际上它是。

【讨论】：

【解决方案2】：

再试一试。

我意识到问题在于可见性。 searchabledropdown 插件正在改变 input 和 select 元素的可见性，并且将焦点放在不可见的元素上显然不起作用。

当上面提到的jQuery(".map-searchbox input").focus(); 像魅力一样发挥作用时，弄清楚要让什么可见之后。

【讨论】：