JS问题 ，求各位大神帮帮忙啊

Question

问题：我在写个类似于百度搜索栏的功能，在实现当<input>标签失去焦点时，下拉列表隐藏，当点击下拉列表中的某个项时就把该项的内容写入到<input>标签内，并且下拉列表隐藏，出问题了。     
因为<input>标签我设的是onblur事件时，下拉列表隐藏，那么当 点击下拉列表中的某项时，先执行的时<input>标签的onblur事件，隐藏了下拉列表，那样就无法执行写入操作了。
 具体代码如下：<style type="text/css">
        #txtInput
        {
            width: 150px;
            height: 20px;
            border: 1px solid #9c9c9c;
            padding: 0 2px;
        }
        #txtInput:hover
        {
            border: 1px solid blue;
        }
        #list
        {
            display: none;
            top: 30px;
            left: 8px;
            position: absolute;
            min-width: 154px;
            border: 1px solid #9c9c9c;
            background-color: white;
        }
        ul
        {
            padding:0px;
            margin:0px;
            list-style:none;
            cursor:pointer;
            }
        ul li:hover
        {
            background-color:#9c9c9c;
            }
    </style>
    <script type="text/javascript">
        
        function txtFocus() {
            var txtInput = document.getElementById("txtInput");
            var divList = document.getElementById("list");
            if (txtInput.value != "") {
                divList.style.display = "block";
            }
        }
        function txtBlur() {
            var txtInput = document.getElementById("txtInput");
            var divList = document.getElementById("list");
            divList.style.display = "block";
        }
        function txtChange() {
            var txtInput = document.getElementById("txtInput");
            var divList = document.getElementById("list");
            if (txtInput.value != "") {
                divList.style.display = "block";
            }
            else {
                divList.style.display = "none";
            }
        }
        function listClick(num) {
            var txtInput = document.getElementById("txtInput");
            var divList = document.getElementById("list");
            var arr = divList.getElementsByTagName("li");
            for (var i = 0; i < arr.length; i++) {
                if (String(i) == num) {
                    txtInput.value = arr[i].innerText;
                    divList.style.display = "none";
                }
            }
            
        }
    </script>//html部分
    <input type="text" id="txtInput" onblur="txtBlur()" onfocus="txtFocus()" onkeyup="txtChange()" />
    <div id="list">
        <ul>
            <li onclick="listClick(0)">阿达的身份</li>
            <li onclick="listClick(1)">a奥迪啊dsfad</li>
            <li onclick="listClick(2)">ad敖德萨sfa</li>
            <li onclick="listClick(3)">爱的发的</li>
            <li onclick="listClick(4)">第三方</li>
            <li onclick="listClick(5)">全额为人</li>
        </ul>
    </div>

Answer 1

这个你可以在onblur里先不急着隐藏下拉，而是让判断list是否获得焦点，如果list获得焦点当然就不隐藏list了，等调用listclick后隐藏，否则直接隐藏list

Answer 2

<div id="divtest" style="width:980px;background-color:green;position:absolute;z-index:1;">
 <ul id="list">
 <li>张柏芝</li>
 <li>林心如</li>
 <li>李小璐</li>
 <li>王骆丹</li>
 </ul>
 </div>
<input type="text" id="txtInput" onfocus="txtFocus()" onkeyup="txtChange()" /><script type="text/javascript">
function txtFocus() {
  var txtInput = document.getElementById("txtInput");
  var divList = document.getElementById("list");
  if (txtInput.value != "") {
  divList.style.display = "block";
  }
  }  function txtChange() {
  var txtInput = document.getElementById("txtInput");
  var divList = document.getElementById("list");
  if (txtInput.value != "") {
  itembind();
  divList.style.display = "block";
  }
  else {
  divList.style.display = "none";
  }
  }
  function itembind(){
    var item=document.getElementById("list").getElementsByTagName("li");
    for(i=0;i<item.length;i++)
    {
        item[i].onclick=function(){
            document.getElementById("txtInput").value=this.innerHTML;
            document.getElementById("list").style.display='none';
        }
    }
  }
</script>