jquery - Jquery UI + 移动自动完成问题

Question

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

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

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

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

谢谢

Answer 1

由于某种原因，您的 z 索引是错误的。这适用于 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/

Answer 2

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

这是所需的所有 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/