Jquery UI +移动自动完成问题

Question

使用自动完成时，它会显示建议输入，如果您点击其中有一个按钮的地方，它会点击按钮而不是建议。

我已经准备了一个JS拨弄问题，看看是否有人能帮助... ...

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

反正我有可以设置自动完成是在顶部，这不发生？

谢谢

Answer 1

由于某些原因，您的z索引是错误的。这在FF上的jsfiddle：

<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元素是同级元素。如果您尝试更改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/