Question

我尝试在RTL页面中使用jQuery UI自动完成功能：http://jsfiddle.net/E9w3V/ 我使用http://cssjanus.commoner.com/将jquery ui转换为RTL样式。

但它的菜单显示不正确。有什么问题？

<body dir="rtl" style="text-align: center">
<link rel="stylesheet" href="jquery-ui.css"/>
<script type="text/javascript" src="../asset/js/jquery/jquery.js"></script>
<script type="text/javascript" src="../asset/js/jquery/jquery-ui.js"></script>



<script type="text/javascript">
    $(function () {
        $('input').autocomplete({source: ['ddd', 'ss', 'awe', 'fgs', 'i', 'e', 'wt']});
    });
</script>
<input type="text"/>
</body>

Answer 1

只需使用以下选项即可解决问题。 ◕‿◕

position:{ my: "right top", at: "right bottom", collision: "none" }

Answer 2

您使用两组jQuery UI代码覆盖样式...删除CSS面板中的一个并解决自身问题。 Demo here

如果您仍想移动自动填充的位置，可以使用jQuery UI的position

但是，您似乎希望自动完成占据视口的整个宽度。您可以通过将函数绑定到autocompleteopen，将其宽度设置为body的宽度，并将其定位到您想要的位置来实现此目的

.bind("autocompleteopen", function(event, ui) {
            var top = $(this).offset().top + $(this).scrollHeight;
            $('.ui-autocomplete.ui-menu').css({
                width:$('body').width(),
                position:'absolute',
                top:top + "px",
                left:'0px'
            });
        });

Demo here

要将这些内容应用于特定的input，请使用以下

$('input:eq(0)').autocomplete({source: ['ddd', ..., 'wt']});

否则，如果您希望将其应用于每个input，则可以使用$.each

$.each($('input'), function() { 
    $(this).autocomplete({source: ['ddd', ... 'wt']});
});

jQuery UI自动完成

2 个答案: