157 lines
3.7 KiB
HTML
157 lines
3.7 KiB
HTML
|
<html>
|
||
|
|
<head>
|
||
|
|
|
||
|
|
|
||
|
|
<style>
|
||
|
|
|
||
|
|
|
||
|
|
.dropdown {
|
||
|
|
background-color: green;
|
||
|
|
border: 3px solid red;
|
||
|
|
position: fixed;
|
||
|
|
padding: 10px;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
top: 0;
|
||
|
|
bottom: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search input {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.results {
|
||
|
|
overflow: scroll;
|
||
|
|
border: 1px solid blue;
|
||
|
|
}
|
||
|
|
|
||
|
|
.results ul {
|
||
|
|
list-style: none;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.results li {
|
||
|
|
border: 1px solid red;
|
||
|
|
height: 10vh;
|
||
|
|
height: 40px;
|
||
|
|
margin: 3px;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script src="jquery-2.1.0.js"></script>
|
||
|
|
<script>
|
||
|
|
$(function () {
|
||
|
|
|
||
|
|
function adjust() {
|
||
|
|
var height = $(".dropdown").height();
|
||
|
|
var searchHeight = $(".search").height();
|
||
|
|
var needed = height - searchHeight;
|
||
|
|
console.log(height, searchHeight, needed);
|
||
|
|
$(".results").css({maxHeight: needed});
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
$(".dropdown")
|
||
|
|
.on("scroll", function (e) {
|
||
|
|
e.preventDefault();
|
||
|
|
return false;
|
||
|
|
});
|
||
|
|
|
||
|
|
$(".search input").on("blur", function() {
|
||
|
|
$(".dropdown").hide();
|
||
|
|
})
|
||
|
|
|
||
|
|
|
||
|
|
//window.setInterval(adjust, 100);
|
||
|
|
|
||
|
|
$("#trigger").on("focus", function(e) {
|
||
|
|
$(".dropdown").show();
|
||
|
|
$(".search input").focus();
|
||
|
|
$("head").append('<meta name = "viewport" content = "user-scalable=no, width=device-width, initial-scale=1.0, maximium-scale=1.0, minimum-scale=1.0"/>');
|
||
|
|
adjust();
|
||
|
|
});
|
||
|
|
|
||
|
|
$("#resize").on("click", adjust);
|
||
|
|
|
||
|
|
var a = 0;
|
||
|
|
$(window).on("resize", function () {
|
||
|
|
adjust();
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<form>
|
||
|
|
<p>
|
||
|
|
<input type="text"/>
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<input type="text"/>
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<input type="text" id="trigger"/>
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<input type="text"/>
|
||
|
|
</p>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<div class="dropdown" style="display:none">
|
||
|
|
|
||
|
|
<div class="result-list">
|
||
|
|
<div class="search">
|
||
|
|
<a href="#">reload</a><span id="message"></span><a href="#" id="resize">resize</a>
|
||
|
|
<input type="text"/>
|
||
|
|
</div>
|
||
|
|
<div class="results">
|
||
|
|
<ul>
|
||
|
|
<li>Result 1</li>
|
||
|
|
<li>Result 2</li>
|
||
|
|
<li>Result 3</li>
|
||
|
|
<li>Result 4</li>
|
||
|
|
<li>Result 5</li>
|
||
|
|
<li>Result 6</li>
|
||
|
|
<li>Result 7</li>
|
||
|
|
<li>Result 8</li>
|
||
|
|
<li>Result 9</li>
|
||
|
|
<li>Result 10</li>
|
||
|
|
<li>Result 11</li>
|
||
|
|
<li>Result 12</li>
|
||
|
|
<li>Result 13</li>
|
||
|
|
<li>Result 14</li>
|
||
|
|
<li>Result 15</li>
|
||
|
|
<li>Result 16</li>
|
||
|
|
<li>Result 17</li>
|
||
|
|
<li>Result 18</li>
|
||
|
|
<li>Result 19</li>
|
||
|
|
<li>Result 20</li>
|
||
|
|
<li>Result 21</li>
|
||
|
|
<li>Result 22</li>
|
||
|
|
<li>Result 23</li>
|
||
|
|
<li>Result 24</li>
|
||
|
|
<li>Result 25</li>
|
||
|
|
<li>Result 26</li>
|
||
|
|
<li>Result 27</li>
|
||
|
|
<li>Result 28</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|