body部分:
<div style="width:70px">
<input type="text" name="loadingPort" autocomplete="off" class="layui-input autocomplete">
<div class="loadingPort ly-hide pull_down">
<ul id="portList">
<li class="getValue">1port1</li>
<li class="getValue">port2</li>
<li class="getValue">port3</li>
</ul>
</div>
</div>
css部分
.pull_down{
width: 100%;
overflow: auto;
border-radius: 3px;
z-index:1001;
border:1px solid #e4e9e9;
max-height: 220px;
background:#fff;
position: absolute;
}
.pull_down ul{
margin: 0;
/*设置列表样式为无*/
list-style: none;
}
.pull_down ul li{
font-size: 18px;
line-height: 30px;
padding-left: 10px;
color:#afafaf;
border-bottom:1px solid #e4e9e9;
}
.pull_down ul li:last-child{
border-bottom:none;
}
.ly-hide{display:none}
js部分:
$(function(){
$(".autocomplete").on('click',onblurInput);
$(".autocomplete").on('blur',blurInput);
$(".getValue").click(getValue);
});
function onblurInput(){
$(this).next().removeClass("ly-hide");
}
function blurInput(){
var that = this;
setTimeout(function(){$(that).next().addClass("ly-hide");}, 100); //需要延时保证getValue()在元素被隐藏前执行
}
function getValue(){
var ele = $(this).parent().parent();
ele.parent().find("input").val($(this).html());
}
js部分需要注意的是隐藏ul部分内容的时机. 因为不强制要求用户一定要从下拉框选择, 所以隐藏这一步在监听input失去焦点时做.如果是必须选择的情况, 可以尽量把addClass("ly-hide")放在getValue()方法中.
在blurInput()方法中, 如果不加setTimeout,会出现getValue()执行前ul就被隐藏, 从而无法触发getValue()方法. 延时时间10的话有点少, 100有时候会出错,500差不多, 1000用户感觉会有点明显.
如果您有更好的实现方法, 望告知, 万分感谢