自动完成问题到引导模式

我有一个模式对话框引导内的jQuery自动完成显示问题。

当我滚动鼠标时,结果不会保持连接到input。

有没有办法解决这个问题?

这里JsFiddle :

.ui-autocomplete-input { border: none; font-size: 14px; width: 300px; height: 24px; margin-bottom: 5px; padding-top: 2px; border: 1px solid #DDD !important; padding-top: 0px !important; z-index: 1511; position: relative; } 

编辑我发现这个问题:

 .ui-autocomplete { position: fixed; ..... } 

如果模式有滚动问题仍然存在!

这里JsFiddle / 1 。

该位置是正确的,它是“绝对”,而你需要指定这是一个选项来自动完成 :

 $( ".addresspicker" ).autocomplete( "option", "appendTo", ".eventInsForm" ); 

在哪里可以将结果固定在任何元素的框中,我必须阻止它被锚定到表单的类!

这是一个工作JsFiddle! 。

上述解决scheme谈论的z-index问题工作:

 .ui-autocomplete { z-index:2147483647; } 

确保将其放在负责处理模式和自动完成逻辑的.js脚本之前。

查看appendTo文档 :

当值为null时,input字段的父项将被检查一个ui-front类。 如果find具有ui-front类的元素,菜单将被追加到该元素。

所以只需将类“ui-front”添加到父元素 ,自动完成将在模态内正确显示。

实际的问题是Bootstrap模态具有比页面中任何其他元素更高的Z-index。 因此,自动完成实际工作 – 但它隐藏在对话框后面。

你只需要添加这个在任何你添加的css文件中:

 .ui-autocomplete { z-index:2147483647; } 

将类“ui-front”添加到div父元素,自动完成将正确显示在PopUp For Me中。

只是尝试添加这个:

 .ui-autocomplete { z-index: 215000000 !important; } 

为了解决这个问题,我只需要通过jQuery在css文件中进行修改:

 .ui-front { z-index: 9999; } 

添加appendTo选项解决了这个问题。 它将菜单附加到引导模型中的一个对象上。

我解决了这个….

 /******************************************************************** * CORREZIONE PER L'AUTOCOMPLETE EXTENDER di AJAX TOOLKIt * ********************************************************************/ ul[id*='_completionListElem'] { z-index: 215000000 !important; } 

自动完成扩展程序完成列表具有这样的一个utomated ID id =' _completionListElem '

所以你必须推高Z指数..上面然后自举模态面板;)

希望能帮助到你

 .ui-front { z-index: 9999; } <div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog ui-front"> <div class="modal-content"> <div class="modal-header"> </div> <div class="modal-body"> </div> </div> </div> </div>