我尝试在RTL页面中使用jQuery UI自动完成：http://jsfiddle.net/E9w3V/我使用将jquery ui转换为RTL样式http://cssjanus.commoner.com/.
但它的菜单显示不正确。怎么了？
<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>
只需使用以下选项即可解决问题。◕‿◕
position:{ my: "right top", at: "right bottom", collision: "none" }
您用两组jQuery UI代码覆盖了样式。。。删除CSS面板中的一个，它就会自行解决此处演示
如果您仍然想移动自动完成的位置，可以使用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'
});
});
此处演示
要将这些内容应用于特定的input，请使用以下
$('input:eq(0)').autocomplete({source: ['ddd', ..., 'wt']});
否则，如果您希望它应用于每个input，您可以使用$.each
$.each($('input'), function() {
$(this).autocomplete({source: ['ddd', ... 'wt']});
});