<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">< ...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<style>
ul{
padding: 0;
margin-top: 2px;
}
ul>li{
list-style: none;
}
.search-select{
width: 210px;
text-align: center;
}
.search-select .search-select-list{
width: 200px;
max-height: 200px;
overflow-y: scroll;
box-shadow: 0 3px 6px rgba(221,221,221,1.0);
border-radius: 0.2rem;
margin: 0 auto;
display: none;
padding-top: 0;
}
.search-select .search-select-list>ul>li{
height: 40px;
line-height: 40px;
padding-left: 0.4rem;
text-align: left;
}
.search-select .search-select-list>ul>.active{
background-color: #dddddd;
}
.search-select-list>ul>li:hover{
background-color: #fafafa;
}
.search-select .search-select-input>input{
width: 180px;
border-radius: 0.2rem;
outline: none;
border: 1px solid #dddddd;
padding: 0.4rem 0.8rem;
}
.search-select .search-select-input>input:focus{
border: 1px solid #00a7d0;
box-shadow: 0 0 4px #00a7d0;
}
/*滾動條樣式*/
.innerbox::-webkit-scrollbar {/*滾動條整體樣式*/
width: 4px; /*高寬分別對應橫豎滾動條的尺寸*/
height: 4px;
display: none;
}
.innerbox::-webkit-scrollbar-thumb {/*滾動條裡面小方塊*/
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.2);
}
/*滾動條裡面軌道*/
.innerbox::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 0;
background: rgba(0,0,0,0.1);
}
.innerbox:hover::-webkit-scrollbar{
display: block;
}
</style>
<div class="search-select">
<div class="search-select-input">
<input type="text" oninput="fun()" id="aa">
</div>
<div class="innerbox search-select-list">
<ul id="dd">
<li>分類</li>
</ul>
</div>
</div>
<script type="text/javascript">
/**
* 初始化下拉框
*/
$(function (window) {
var index = 0;//li角標
var classArr = [".search-select-input input",".search-select-list li",".search-select-list"]//獲取選擇器數組
//添加獲得焦點事件
$(classArr[0]).focus(function () {
$(".search-select-list").slideDown()
})
//添加失去焦點事件
$(classArr[0]).blur(function () {
$(".search-select-list").slideUp()
index=0;
$(classArr[1]).removeClass("active");
})
//添加鍵盤按鍵抬起事件
$(classArr[0]).on("keyup",function (e) {
// console.log(e)
var arrLength = $(classArr[1]).length;
// console.log(arrLength)
switch (e.keyCode){
case 40://監聽鍵盤下鍵
index++;
if(index>arrLength){
index = 1;
$(classArr[2]).scrollTop(0);
}
$(classArr[1]).removeClass("active")
$(classArr[1]+":nth-child("+index+")").addClass("active");
var top = $(classArr[1]+":nth-child("+index+")").offset().top;
console.log($(classArr[2]).scrollTop());
if(top > 200)
$(classArr[2]).scrollTop((index-5)*40);
break;
case 38://監聽鍵盤上鍵
index--;
if(index<1)
index = arrLength;
$(classArr[1]).removeClass("active")
$(classArr[1]+":nth-child("+index+")").addClass("active");
console.log($(classArr[1]+":nth-child("+index+")").offset());
var top = $(classArr[1]+":nth-child("+index+")").offset().top;
if(top > 200){
$(classArr[2]).scrollTop((index-5)*40);
}else if(top < 40){
$(classArr[2]).scrollTop((index-5)*40)
}
console.log(top);
break;
case 13://監聽鍵盤迴車鍵
$(classArr[0]).val($(".search-select-list .active").text());
break;
default://預設
var text = $(this).val().trim();
// console.log(text)
if (text == ""){
$(classArr[1]).show();
return;
}
$(classArr[1]).each(function () {
if($(this).text().trim().indexOf(text) == -1){
$(this).hide();
}else {
$(this).show();
}
})
break;
}
})
//添加點擊事件
$(classArr[1]).on("click",function () {
$(classArr[0]).val($(this).text())
})
})
function fun(){
var html="";
var ss= $('#aa').val();
html+="<li><a href='index.html'>";
html+=ss;
html+="</li></a>";
$("#dd").html(html);
}
</script>
</body>
</html>
