jQuery UI自動完成

我試圖在RTL頁面中使用jQuery UI自動完成：http://jsfiddle.net/E9w3V/ 我使用http://cssjanus.commoner.com/將jquery ui轉換爲RTL樣式。jQuery UI自動完成

但其菜單無法正常顯示。哪裏不對？

<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>

來源

2013-11-28 PHPst

只需使用以下選項即可解決問題。 ◕‿◕

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

來源

2013-11-30 06:33:54 PHPst

結果與我發佈的第一個演示不完全相同嗎？ –

@Zeaklous我在本地嘗試了它，它的工作原理。 JSfiddle沒有正確顯示它。非常感謝您的嘗試。 – PHPst

它也適用於jsFiddle！哈哈。而且更簡單 –

你用兩套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']}); 
});

來源

2013-11-28 19:39:23

謝謝，但我看不出你與原始版本的輸出有任何區別。建議清單應完全置於輸入之下。 – PHPst

@PHPst更新了我的解決方案，以適應 –

也許我不清楚我的問題。我想在RTL頁面中使用自動完成小部件。你有沒有試過做過一些RTL的東西？ – PHPst

jQuery UI自動完成

回答

相關問題