模拟下拉菜单

效果图如下：

模拟下拉菜单

html结构代码：

<style>
input,ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
    width:200px;
    border:1px solid #000;
    outline:none;
}
input{
    padding-left:6px;
    width: 194px;
}
</style>
<input type="text" name="keywords">

js逻辑代码：

// 定义每个li中的文本内容数组
var arr = ['vue','react','angular'];
// 获取标签
var keywordsInput = document.querySelector('[name="keywords"]');
// 获取焦点的时候，出现下拉框 - 创建ul列表显示
keywordsInput.addEventListener('click',focus)
function focus(){
    // 将原先的ul删除掉
    // 当前文本框后面的标签如果是ul且类名是select就删除
    if(this.nextElementSibling.tagName === 'UL' && this.nextElementSibling.className === 'select'){
        this.parentElement.removeChild(this.nextElementSibling)
    }
    // 创建ul标签
    var ul = document.createElement('ul')
    // 设置类名，方便后面识别
    ul.className = 'select';
    // 根据数组创建li，将li放到ul中
    arr.forEach(function(item){
        var li = document.createElement('li')
        li.innerText = item;
        ul.appendChild(li)
        // 给所有li绑定单击事件，点击将当前li的内容放在input中
        li.addEventListener('click',click)
    })
    // 将ul作为当前文本框的下一个兄弟标签
    this.parentElement.insertBefore(ul,this.nextElementSibling)
}
// li的单击事件
function click(){
    keywordsInput.value = this.innerText
}
// 给input绑定失去焦点事件，让ul消失
keywordsInput.addEventListener('blur',blur)
function blur(){
    // 延迟100毫秒让ul消失，因为点击li的时候li的点击事件会跟输入框的失去焦点事件同时出发，如果将ul消失了，li就点击不中了，为了能让li点击事件先触发，就在输入框的失去焦点事件中让ul延迟消失
    setTimeout(function(){
        keywordsInput.nextElementSibling.parentElement.removeChild(keywordsInput.nextElementSibling)
    },100)
}