HTML弹出窗口不会滚动
我目前有一个带有搜索栏的网站。搜索栏具有一种自动完成建议功能。当用户开始书写时，可能的建议列表将下拉。此时，用户可以从弹出的建议列表中选择一个选项，也可以自己完成编写。我的问题是由于某种原因，我无法向下滚动建议列表。我已经上下查看了我的代码，无法弄清楚。任何建议表示赞赏。
预搜索：
PostSearch：
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 :(得分：0)
我可以使用“ Scrollable JQuery UI自动完成”来解决此问题。这是我使用的两个链接：
可滚动的JQuery UI自动完成功能： 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行都放在
内
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？