input 和ul li 组成模糊匹配

作者: 骚年应该有内涵
来源: 51数据库
2021-09-04

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>insert title here</title>
<script src="http://www.51sjk.com/Upload/Articles/1/0/270/270974_20210708050938195.js"></script>
<script src="http://www.51sjk.com/Upload/Articles/1/0/270/270974_20210708050938227.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>

/**
* 初始化下拉框
*/
$(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 >";
html+=ss;
html+="</li></a>";
$("#dd").html(html);

}
</script>

</body>
</html>