CODEWITHSUNDEEP
cssjquery-uistyles
Real Dreams
Real Dreams

Reputation: 18010

jQuery UI auto-complete

I tried to use jQuery UI autocomplete in a RTL page: http://jsfiddle.net/E9w3V/ I converted jquery ui to RTL style using http://cssjanus.commoner.com/.

But its menu does not display properly. What is wrong?

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

Upvotes: 0

Views: 1159

Answers (2)

Real Dreams
Real Dreams

Reputation: 18010

Just using following option solved the problem. ◕‿◕ 

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

Upvotes: 2

Zach Saucier
Zach Saucier

Reputation: 25944

You were overriding the styles with two sets of jQuery UI code... Remove the one in the CSS panel and it solves itself. Demo here

If you still wanted to move the location of the autocomplete, you can use jQuery UI's position

However it seems you wanted the auto complete to take up the full width of the viewport. You can do so by binding a function to autocompleteopen, setting its width to the body's width, and positioning it where you want it

.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

To apply these things to a specific input, use the following

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

Otherwise if you want it to apply to every input, you can use $.each

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

Upvotes: 0

Related Questions