<!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{
210px;
text-align: center;
}
.search-select .search-select-list{
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{
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 {/*滚动条整体样式*/
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>