Jquery UI + 移动自动完成问题答案

【问题标题】：Jquery UI + Mobile Autocomplete IssueJquery UI + 移动自动完成问题
【发布时间】：2012-08-04 14:49:38
【问题描述】：

当使用自动完成时，它会显示建议输入，如果您单击下面有按钮的输入，它会单击按钮而不是建议。

我已经准备了一个解决问题的 JS 小提琴，看看是否有人可以提供帮助......

http://jsfiddle.net/XuZBt/8/

无论如何我可以将自动完成设置在最上面，这样就不会发生这种情况？

谢谢

【问题讨论】：

标签： jquery css jquery-ui jquery-mobile jquery-ui-autocomplete

【解决方案1】：

由于某种原因，您的 z-index 是错误的。这适用于 jsFiddle 上的 FF：

<input type="text" id="personHomeNum" data-autofill="N/A" data-stat="KNOWN" style="z-index: 1" />
<input type="button" value="Validate" id="validation_btn" style="z-index: 1"/>

出于某种原因，这似乎可行：

http://jsfiddle.net/XuZBt/20/

【讨论】：

这不允许我正常点击按钮吗？
查看我的更新，如果两者都设置为 z-index=1，它可以工作。检查jsfiddle.net/XuZBt/20希望这会有所帮助:)

【解决方案2】：

通过一些细微的 CSS 调整，我们可以在按钮上方设置自动完成小部件。按钮的z-index 由其升序data-role="page" z-index 指定，因为data-role="page" 和.ui-autocomplete 元素是兄弟元素。如果您尝试更改 data-role="page" 元素内按钮的 z-index ，它不会在大多数浏览器中对自动完成小部件产生影响（它适用于某些浏览器，但不适用于其他浏览器）。

以下是所需的所有 CSS：

/*this rule makes the links in the autocomplete list block elements so they expand to fill their parents*/
.ui-autocomplete.ui-menu .ui-menu-item a {
    display : block;
}

/*this rule just sets the autocomplete menu above the data-role="page" element*/
.ui-autocomplete.ui-menu {
    z-index : 10;
}

这是一个演示：http://jsfiddle.net/XuZBt/21/

【讨论】：