Question

我在jqueryMobile应用程序上使用jQuery Autocomplete。它完美无缺。现在我试图显示垂直滚动条以滚动查找项目列表。滚动条显示在桌面浏览器上，但不显示在Android设备上。我的CSS看起来像这样：

的.ui-自动完成 { 最大高度：100px; overflow-y：auto; / *防止水平滚动条* / overflow-x：hidden; }

有人可以帮忙，谢谢！

Answer 1

尝试将overflow属性设置为auto ..

overflow: auto;

Answer 2

Resolved by using jscrollpane. see below code:

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <link rel="stylesheet" href="css/jquery-ui.css" />

    <script type="text/javascript" src="Scripts/jquery.min.js"></script>

    <script type="text/javascript" src="Scripts/jquery-ui.min.js"></script>

    <link rel="stylesheet" href="http://jscrollpane.kelvinluck.com/style/jquery.jscrollpane.css" />

    <script type="text/javascript" src="http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.min.js"></script>

    <script type="text/javascript">
        $(function() {
            var availableTags = [{
                real_value: 1,
                label: "c++"
            },
                {
                    real_value: 1,
                    label: "ActionScript"
                },
                {
                    real_value: 2,
                    label: "AppleScript"
                },
                {
                    real_value: 3,
                    label: "Asp"
                },
                {
                    real_value: 4,
                    label: "BASIC"
                },
                {
                    real_value: 5,
                    label: "C"
                },
                {
                    real_value: 6,
                    label: "C++"
                },
                {
                    real_value: 7,
                    label: "Clojure"
                },
                {
                    real_value: 8,
                    label: "COBOL"
                },
                {
                    real_value: 9,
                    label: "ColdFusion"
                },
                {
                    real_value: 10,
                    label: "Erlang"
                },
                {
                    real_value: 11,
                    label: "Fortran"
                },
                {
                    real_value: 12,
                    label: "Groovy"
                },
                {
                    real_value: 13,
                    label: "Haskell"
                },
                {
                    real_value: 14,
                    label: "Java"
                },
                {
                    real_value: 15,
                    label: "JavaScript"
                },
                {
                    real_value: 16,
                    label: "Lisp"
                },
                {
                    real_value: 17,
                    label: "Perl"
                },
                {
                    real_value: 18,
                    label: "PHP"
                },
                {
                    real_value: 19,
                    label: "Python"
                },
                {
                    real_value: 20,
                    label: "Ruby"
                },
                {
                    real_value: 21,
                    label: "Scala"
                },
                {
                    real_value: 22,
                    label: "Scheme"
                }
            ];

            $("#tags").autocomplete({
                source: availableTags,
                open: function(event, ui) {
                    $('.ui-autocomplete')
                        .addClass('scroll-pane')
                        .jScrollPane();

                    $('.jScrollPaneContainer').css({
                        'position': 'absolute',
                        'top': ($(this).offset().top +
                   $(this).height() + 5) + 'px',
                        'left': $(this).offset().left + 'px'
                    });
                },
                close: function(event, ui) {
                    $('.scroll-pane').jScrollPaneRemove();
                },
                select: function(event, ui) {
                    alert(ui.item.label);
                    alert(ui.item.real_value);
                }
            });
        });
    </script>

    <style>
        .ui-autocomplete
        {
            max-height: 100px;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div>
        <input type="text" id="tags" />
    </div>
</body>
</html>

JQueryMobile Autocomplete的垂直滚动条无法在Android上运行

2 个答案: