ul将显示当输入字段得到一些输入。现在我想在输入和ul都失去焦点时隐藏ul。与stackoverflow搜索栏的工作原理相同。我尝试了一些选择，但都不起作用。我确信我没有为这个应用适当的方法，我想知道这个的功能，所以请用javascript而不是jQuery给出你的解决方案。
null
document.getElementById("1").addEventListener("blur", function(){
document.getElementById("2").addEventListener("blur", function(){
document.getElementById("2").style.display = 'none'
})
})<input type="text" id="one">
<ul id="two" style="display: none;">
<li>ajbf</li>
</ul>null
考虑到页面上可能有也可能没有具有类似功能需求的其他项，最好给出输入项和ul项ID并直接针对它们:
null
const x = document.getElementById('mytext')
const ul = document.getElementById('mylist')
x.addEventListener('focus', function() {
ul.style.display = '';
})
x.addEventListener('blur', function() {
ul.style.display = 'none'
})<input type="text" id="mytext">
<ul style="display: none;" id="mylist">
<li>ajbf</li>
</ul>
而不是有2个事件，只需添加一个点击事件到所有的列表项。
null
const input = document.querySelector('input');
const ul = document.querySelector('ul');
const lis = [...ul.querySelectorAll('li')];
input.addEventListener('input', function() {
ul.style.display = 'initial';
});
lis.forEach(li => {
li.addEventListener('click', function() {
ul.style.display = 'none';
console.log(this.innerHTML);
});
});<input type="text">
<ul style="display: none;">
<li>abc</li>
<li>efg</li>
<li>hij</li>
</ul>