HTML-всплывающее окно не будет прокручиваться - PullRequest
Новая
       0

HTML-всплывающее окно не будет прокручиваться

0 голосов
/ 23 октября 2018

У меня сейчас есть сайт с панелью поиска.Панель поиска имеет функцию автозаполнения предложений.Когда пользователь начинает писать, список возможных предложений будет раскрыт.На этом этапе пользователь может либо выбрать один из предложенных вариантов из списка предложений, либо завершить его написание самостоятельно.Моя проблема в том, что по какой-то причине я не могу прокрутить список предложений вниз.Я посмотрел на мой код вверх и вниз и не могу понять это.Любое предложение приветствуется.

Предварительный поиск: enter image description here

PostSearch: enter image description here

HTML-код: 

<html>

<head>
    <title>WEBSITE SAMPLE</title>
    <meta charset="utf-8">

    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">

    <meta itemprop="name" content="">
    <meta itemprop="description" content="">
    <meta itemprop="image" content="">

    <meta property="og:url" content="">
    <meta property="og:type" content="website">
    <meta property="og:title" content="">
    <meta property="og:description" content="">
    <meta property="og:image" content="">

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="">
    <meta name="twitter:description" content="">
    <meta name="twitter:image" content="">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="shortcut icon" href="favicon.ico" />
    <link rel="apple-touch-icon" sizes="144x144" href="images/iosicon.png">
    <link rel="mask-icon" href="icon.svg" color="#2bb24c">

    <link rel="stylesheet" href="css/slick.css" />
    <link rel="stylesheet" href="css/animate.css">
    <script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl"
        crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/css.css" />

    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>



</head>

<body>
    <div class="header">
        <div class="logo-header">

            <a href="../">
                <img src="img/foto.png" id="foto" />
            </a>
        </div>
    </div>

    <input id="autocomplete" type="text" placeholder="Buscar...">
    <button id="sortButton" onclick="TakeToSort()">Sort</button>
    <button id="filterButton" onclick="TakeToFilter()">Filter</button>


    <style>
        input {
            display: none;
        }

        #sortButton{
          display: none;
        }

        #filterButton{
          display: none;
        }

        /* // Extra small devices (portrait phones, less than 576px) */

        @media (max-width: 575.98px) {}

        /* // Small devices (landscape phones, less than 768px) */

        @media (max-width: 767.98px) {



            input {
                width: 100%;
                padding: 20px;
                display: block;
            }

            #sortButton {
              width: 100%;
              padding: 20px;
              display: block;
            }

            #filterButton {
              width: 100%;
              padding: 20px;
              display: block;
            }


        }

        /* // Medium devices (tablets, less than 992px) */

        @media (max-width: 991.98px) {}

        /* // Large devices (desktops, less than 1200px) */

        @media (max-width: 1199.98px) {}
    </style>


    <iframe class="airtable-embed" src="PRIVATE LINK"
        frameborder="0" onmousewheel="" style="background: #999999!important; border: 1px solid #ccc;"></iframe>
    <style>
        #galleryView {
            background-color: #000 !important;
        }
    </style>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4"
        crossorigin="anonymous"></script>
    <script src="Public/js/jquery.min.js"></script>

    <script src="js/js.js"></script>

    <script>
        var source = [{
                value: "PrivateLink1",
                label: "FOR PrivateLink1"
            },
            {
                value: "PrivateLink2",
                label: "FOR PrivateLink2"
            },
            {
                value: "PrivateLink3",
                label: "FOR PrivateLink3"
            },
            {
                value: "PrivateLink4",
                label: "FOR PrivateLink4"
            },
            {
                value: "PrivateLink5",
                label: "FOR PrivateLink5"
            },
            {
                value: "PrivateLink6",
                label: "FOR PrivateLink6"
            },
            {
                value: "PrivateLink7",
                label: "FOR PrivateLink7"
            },
            {
                value: "PrivateLink8",
                label: "FOR PrivateLink8"
            },
            {
                value: "PrivateLink9",
                label: "FOR PrivateLink9"
            },
            {
                value: "PrivateLink10",
                label: "FOR PrivateLink10"
            },
            {
                value: "PrivateLink11",
                label: "FOR PrivateLink11"
            },
            {
                value: "PrivateLink12",
                label: "FOR PrivateLink12"
            },
            {
                value: "PrivateLink13",
                label: "FOR PrivateLink13"
            },
            {
                value: "PrivateLink14",
                label: "FOR PrivateLink14"
            },
            {
                value: "PrivateLink15",
                label: "FOR PrivateLink15"
            },
            {
                value: "PrivateLink16",
                label: "FOR PrivateLink16"
            },
            {
                value: "PrivateLink17",
                label: "FOR PrivateLink17"
            },
            {
                value: "PrivateLink18",
                label: "FOR PrivateLink18"
            },
            {
                value: "PrivateLink19",
                label: "FOR PrivateLink19"
            },
            {
                value: "PrivateLink20",
                label: "FOR PrivateLink20"
            },
            {
                value: "PrivateLink21",
                label: "FOR PrivateLink21"
            },
            {
                value: "PrivateLink22",
                label: "FOR PrivateLink22"
            }, {
                value: "PrivateLink23",
                label: "FOR PrivateLink23"
            },
            {
                value: "PrivateLink24",
                label: "FOR PrivateLink24"
            }, {
                value: "PrivateLink25",
                label: "FOR PrivateLink25"
            }, {
                value: "PrivateLink26",
                label: "FOR PrivateLink26"
            }, {
                value: "PrivateLink27",
                label: "FOR PrivateLink27"
            }, {
                value: "PrivateLink28",
                label: "FOR PrivateLink28"
            }, {
                value: "PrivateLink29",
                label: "FOR PrivateLink29"
            }, {
                value: "PrivateLink30",
                label: "FOR PrivateLink30"
            }, {
                value: "PrivateLink31",
                label: "FOR PrivateLink31"
            }, {
                value: "PrivateLink32",
                label: "FOR PrivateLink32"
            }, {
                value: "PrivateLink33",
                label: "FOR PrivateLink33"
            }, {
                value: "PrivateLink34",
                label: "FOR PrivateLink34"
            }, {
                value: "PrivateLink35",
                label: "FOR PrivateLink35"
            }, {
                value: "PrivateLink36",
                label: "FOR PrivateLink36"
            }, {
                value: "PrivateLink37",
                label: "FOR PrivateLink37"
            }, {
                value: "PrivateLink38",
                label: "FOR PrivateLink38"
            }, {
                value: "PrivateLink39",
                label: "FOR PrivateLink39"
            }, {
                value: "PrivateLink40",
                label: "FOR PrivateLink40"
            }, {
                value: "PrivateLink41",
                label: "FOR PrivateLink41"
            }, {
                value: "PrivateLink42",
                label: "FOR PrivateLink42"
            }, {
                value: "PrivateLink43",
                label: "FOR PrivateLink43"
            }, {
                value: "PrivateLink44",
                label: "FOR PrivateLink44"
            }, {
                value: "PrivateLink45",
                label: "FOR PrivateLink45"
            }, {
                value: "PrivateLink46",
                label: "FOR PrivateLink46"
            }, {
                value: "PrivateLink47",
                label: "FOR PrivateLink47"
            }, {
                value: "PrivateLink48",
                label: "FOR PrivateLink48"
            }, {
                value: "PrivateLink49",
                label: "FOR PrivateLink49"
            }, {
                value: "PrivateLink50",
                label: "FOR PrivateLink50"
            }, {
                value: "PrivateLink51",
                label: "FOR PrivateLink51"
            }, {
                value: "PrivateLink52",
                label: "FOR PrivateLink52"
            }, {
                value: "PrivateLink53",
                label: "FOR PrivateLink53"
            }, {
                value: "PrivateLink54",
                label: "FOR PrivateLink54"
            }, {
                value: "PrivateLink55",
                label: "FOR PrivateLink55"
            }, {
                value: "PrivateLink56",
                label: "FOR PrivateLink56"
            }, {
                value: "PrivateLink57",
                label: "FOR PrivateLink57"
            }, {
                value: "PrivateLink58",
                label: "FOR PrivateLink58"
            }, {
                value: "PrivateLink59",
                label: "FOR PrivateLink59"
            }, {
                value: "PrivateLink60",
                label: "FOR PrivateLink60"
            }, {
                value: "PrivateLink61",
                label: "FOR PrivateLink61"
            }, {
                value: "PrivateLink62",
                label: "FOR PrivateLink62"
            }, {
                value: "PrivateLink63",
                label: "FOR PrivateLink63"
            }, {
                value: "PrivateLink64",
                label: "FOR PrivateLink64"
            }, {
                value: "PrivateLink65",
                label: "FOR PrivateLink65"
            }, {
                value: "PrivateLink66",
                label: "FOR PrivateLink66"
            }, {
                value: "PrivateLink67",
                label: "FOR PrivateLink67"
            }, {
                value: "PrivateLink68",
                label: "FOR PrivateLink68"
            }, {
                value: "PrivateLink69",
                label: "FOR PrivateLink69"
            }, {
                value: "PrivateLink70",
                label: "FOR PrivateLink70"
            }, {
                value: "PrivateLink71",
                label: "FOR PrivateLink71"
            }, {
                value: "PrivateLink72",
                label: "FOR PrivateLink72"
            }, {
                value: "PrivateLink73",
                label: "FOR PrivateLink73"
            }, {
                value: "PrivateLink74",
                label: "FOR PrivateLink74"
            }, {
                value: "PrivateLink75",
                label: "FOR PrivateLink75"
            }, {
                value: "PrivateLink76",
                label: "FOR PrivateLink76"
            }, {
                value: "PrivateLink77",
                label: "FOR PrivateLink77"
            }, {
                value: "PrivateLink78",
                label: "FOR PrivateLink78"
            }, {
                value: "PrivateLink79",
                label: "FOR PrivateLink79"
            }, {
                value: "PrivateLink80",
                label: "FOR PrivateLink80"
            }, {
                value: "PrivateLink81",
                label: "FOR PrivateLink81"
            }, {
                value: "PrivateLink82",
                label: "FOR PrivateLink82"
            }, {
                value: "PrivateLink83",
                label: "FOR PrivateLink83"
            }, {
                value: "PrivateLink84",
                label: "FOR PrivateLink84"
            }, {
                value: "PrivateLink85",
                label: "FOR PrivateLink85"
            }, {
                value: "PrivateLink86",
                label: "FOR PrivateLink86"
            }, {
                value: "PrivateLink87",
                label: "FOR PrivateLink87"
            }, {
                value: "PrivateLink88",
                label: "FOR PrivateLink88"
            }, {
                value: "PrivateLink89",
                label: "FOR PrivateLink89"
            }, {
                value: "PrivateLink90",
                label: "FOR PrivateLink90"
            }, {
                value: "PrivateLink91",
                label: "FOR PrivateLink91"
            }, {
                value: "PrivateLink92",
                label: "FOR PrivateLink92"
            }, {
                value: "PrivateLink93",
                label: "FOR PrivateLink93"
            }, {
                value: "PrivateLink94",
                label: "FOR PrivateLink94"
            }, {
                value: "PrivateLink95",
                label: "FOR PrivateLink95"
            }, {
                value: "PrivateLink96",
                label: "FOR PrivateLink96"
            }, {
                value: "PrivateLink97",
                label: "FOR PrivateLink97"
            }, {
                value: "PrivateLink98",
                label: "FOR PrivateLink98"
            }, {
                value: "PrivateLink99",
                label: "FOR PrivateLink99"
            }, {
                value: "PrivateLink100",
                label: "FOR PrivateLink100"
            }, {
                value: "PrivateLink101",
                label: "FOR PrivateLink101"
            }, {
                value: "PrivateLink102",
                label: "FOR PrivateLink102"
            }, {
                value: "PrivateLink103",
                label: "FOR PrivateLink103"
            }, {
                value: "PrivateLink104",
                label: "FOR PrivateLink104"
            }, {
                value: "PrivateLink105",
                label: "FOR PrivateLink105"
            }, {
                value: "PrivateLink106",
                label: "FOR PrivateLink106"
            }, {
                value: "PrivateLink107",
                label: "FOR PrivateLink107"
            }, {
                value: "PrivateLink108",
                label: "FOR PrivateLink108"
            }, {
                value: "PrivateLink109",
                label: "FOR PrivateLink109"
            }, {
                value: "PrivateLink110",
                label: "FOR PrivateLink110"
            }, {
                value: "PrivateLink111",
                label: "FOR PrivateLink111"
            }, {
                value: "PrivateLink112",
                label: "FOR PrivateLink112"
            }, {
                value: "PrivateLink113",
                label: "FOR PrivateLink113"
            }, {
                value: "PrivateLink114",
                label: "FOR PrivateLink114"
            }, {
                value: "PrivateLink115",
                label: "FOR PrivateLink115"
            }, {
                value: "PrivateLink116",
                label: "FOR PrivateLink116"
            }, {
                value: "PrivateLink117",
                label: "FOR PrivateLink117"
            }, {
                value: "PrivateLink118",
                label: "FOR PrivateLink118"
            }, {
                value: "PrivateLink119",
                label: "FOR PrivateLink119"
            }, {
                value: "PrivateLink120",
                label: "FOR PrivateLink120"
            }, {
                value: "PrivateLink121",
                label: "FOR PrivateLink121"
            }
        ];

        $("input#autocomplete").autocomplete({
            source: source,
            select: function (event, ui) {

                window.location.href = ui.item.value;
            }
        });
    </script>
    <script src="js/changeViews.js"></script>
</body>

</html>

1 Ответ

0 голосов
/ 23 октября 2018

Мне удалось решить эту проблему, но с помощью «Автозаполнения прокручиваемого пользовательского интерфейса JQuery».Вот две ссылки, которые я использовал:

Автозаполнение прокручиваемого пользовательского интерфейса JQuery: http://anseki.github.io/jquery-ui-autocomplete-scroll/

Пример (на веб-сайте нажмите на источник просмотра, чтобы получить образец кода, а не только на функциональность).): http://jqueryui.com/autocomplete/#maxheight

Чтобы все заработало, я просто добавил следующие строки: 

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<style>
    .ui-autocomplete {
    max-height: 200px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
  }
  /* IE 6 doesn't support max-height
   * we use height instead, but this forces the menu to always be this tall
   */
  * html .ui-autocomplete {
    height: 100px;
  }
  </style>
  
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Все эти строки html идут внутри

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...