jQuery UI自动完成位置 [英] JQuery UI AutoComplete Position

问题描述

我想相对于浏览器窗口正确放置自动完成功能(菜单).也就是说，当自动完成功能位于页面顶部时，使菜单向下；如果位于页面底部，则使菜单向上(即使我们有一些垂直滚动条).

I'd like to position my autocomplete (menu) properly in relation to the browser window. That is, when the autocomplete is at the top of the page get the menu going down and if at the bottom of the page get the menu going up (even if we have some vertical scrollbar).

Thx.

推荐答案

使用position选项激活碰撞检测:

Use the position option to activate collision detection:

$( "#someElement" ).autocomplete({
    source: [...]
    position: {  collision: "flip"  }
});​

演示

自动完成功能使用 jQuery UI Position 实用工具轻松地将菜单放置在相对于输入元素的位置.

The autocomplete uses the jQuery UI Position utility to easily place the menu relatively to the input element.

选项collision可以自动将元素移动到其他位置，以防在视口中无法沿默认方向查看元素的情况.

The option collision to automatically move the element to an alternative position in case the element would not be viewable in the default direction in the viewport.

值flip将在完全可见的方向上显示菜单的上方或下方.

The value flip will show the menu below or above, in the direction is will be fully viewable.

这篇关于jQuery UI自动完成位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！