js实现可下拉选择也可手动填写的input

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用户感觉会有点明显.

如果您有更好的实现方法, 望告知, 万分感谢