这是css样式,主要采用的是绝对定位
.pdt-blog{ width: 70%; margin:10px auto;}
.pdt-blog .select{ position: relative;display: inline-block;}
.pdt-blog .select ul{position: absolute;width: 100%;border: 1px solid #ddd; background: #fff;max-height: 10rem; overflow: auto; display:none;}
.pdt-blog .select ul li{padding: 3px; border-bottom: 1px solid #ddd;}
主要的HTML代码:
<div class="select">
<input type="text" class="pdt-name" id="enter" placeholder="请输入产品品" />
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
jquery代码:
$('body').click(function(event){
$('.pdt-blog .select ul').css({'display':'none'});
});
$('input.pdt-name').click(function(event){
event.stopPropagation();
$(this).siblings('ul').css({'display':'block'});
});
$('.pdt-blog .select ul li').click(function(event){
event.stopPropagation();
var li_value=$(this).html();
$(this).parent().siblings('input').val(li_value);
$('.pdt-blog .select ul').css({'display':'none'});
});
JS原生代码:input获取焦点时显示列表,当input失去焦点时隐藏列表
var enter = document.getElementById('enter');
enter.onfocus = function() {
var ul = document.getElementsByTagName('ul')[0];
ul.style.display = "block";
ul.style.opacity = "1"
this.onblur = function() {
let lis = document.getElementsByTagName('li')
for (let key = 0; key < lis.length; key++) {
lis[key].addEventListener('click', function() {
console.log("this current li="+this);
});
}
document.getElementsByTagName('ul')[0].style.opacity = "0";
}
}
function select(_this) {
console.log(_this);
}