发布于 5年前
Jquery 实现可输入、可搜索的下拉框
效果预览
实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>可输入下拉框</title>
<style type="text/css">
form{
width:220px;
margin:50px auto;
padding: 20px;
color: #333;
}
input{
width: 220px;
padding: 10px 10px;
border-radius: 2px;
border:1px solid #ddd;
}
.list{
width: 240px;
margin:2px 0;
padding:0;
border: 1px solid #ddd;
display: none;
}
.list li{
list-style: none;
cursor: pointer;
padding:0 10px;
line-height: 30px;
}
.list li.selected{
background: #eee;
}
</style>
</head>
<body>
<form action="">
<input type="text" name="fruit" placeholder="请选择或输入水果名称">
<ul class="list">
<li>苹果</li>
<li>香蕉</li>
<li>葡萄</li>
<li>菠萝</li>
</ul>
</form>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$("input").focus(function(){
$(".list").fadeIn(200);
})
$("input").keyup(function(){
var value = $("input").val();
var list = $(".list li");
list.each(function(){
var name = $(this).text();
if(name.indexOf(value) >= 0 ) {
$(this).show();
}else{
$(this).hide();
}
});
})
$("input").blur(function(){
$(".list").fadeOut(200);
})
$(".list li").click(function(){
$(this).addClass('selected');
$(this).siblings().removeClass('selected');
$("input").val($(this).text());
})
</script>
</body>
</html>
