onblur 與 onfocus 的bug問題

**想做一個類似必應(yīng)的搜索框，點擊空白處時搜索框的光標(biāo)失去焦點聯(lián)想詞隱藏，
聚焦搜索框時聯(lián)想詞顯示；這個功能實現(xiàn)了是實現(xiàn)了，但是有個小問題，
當(dāng)我在搜索框聚焦后，點擊聯(lián)想詞，聯(lián)想詞隱藏了，我獲取不到。**

這是源碼：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #Txt{
            width: 445px;
            height: 30px;
            border:none;
            text-indent: 1.2em;
            line-height: 30px;
            font-size: 16px;
            text-align: left;
        }
        #btn{
            width: 48px;
            height: 30px;
            border:none;
            background: white;
        }
        ul{
            width: 500px;
            height: 300px;
            border:1px #ccc solid;
            display: none;
        }
        li{
            width: 480px;
            height: 30px;
            line-height: 30px;
            font-size: 16px;
            text-align: left;
            padding-left: 20px;
            list-style:none;
        }
        li:hover{
            background: rgb(245, 245, 245);
        }
        #bigBox{
            width: 500px;
            height: 500px;
            margin: 220px auto;
        }
        #bigBox #hh{
            border:1px rgb(203, 203, 203) solid;
        }
    </style>
</head>
<body>
    <div id="bigBox">
        <div>
            <div id="hh">
                <input type="text" id="Txt" />
                <input type="button" value="搜索" id="btn" />
            </div>
        </div>
        <ul id="box"></ul>

    </div>
</body>

</html>
<script>

var oTxt = document.getElementById("Txt");
var oUl = document.getElementById("box");
var oBtn = document.getElementById("btn");
var oHead = document.getElementsByTagName("head")[0];
oTxt.onkeyup = function(){
    oUl.style.display = "block";
    oUl.innerHTML = "";
    var str = oTxt.value;
    var sc = document.createElement("script");
    sc.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+str+"&cb=fn";

    oHead.appendChild(sc);
}
function fn(data){
    var arr = data.s;
    //console.log(arr);
    arr.forEach(function(value){
        var li = document.createElement("li");
        li.innerHTML = value;
        oUl.appendChild(li);
    })
}
//https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=aaaaaaa&cb=
oUl.onclick = function(e){
    oUl.value = "";
    var e = e || event;
    var el = e.target || e.srcElement;
    if(el.nodeName == "LI"){
        oTxt.value = el.innerHTML;
    }
    var url = "https://cn.bing.com/search?q=" + oTxt.value;
    window.open(url);
}
oBtn.onclick = function(){
    var url = "https://cn.bing.com/search?q=" + oTxt.value;
    location.href = url;
}

//出問題的地方在這里

oTxt.onfocus = function(){
    oUl.style.display = "block";
}
oTxt.onblur = function(){
    oUl.style.display = "none";
}

</script>

我的是這樣的出不來

圖片描述

想要的效果是下面這樣
圖片描述

求助各位~

回答

編輯回答

失魂人

oTxt.onblur = function(){

oUl.style.display = "none";

}

把失去焦點換成下面的點擊事件就就可以了

$("#box").on("click","li",function(){

oUl.style.display = "none";

})

2017年6月7日 16:53

編輯回答

枕邊人

你應(yīng)該是沒有設(shè)置鏈接吧？
一般我們點擊那個聯(lián)想詞的時候，瀏覽器已經(jīng)做了跳轉(zhuǎn)(光標(biāo)也自然跳出了輸入框，聯(lián)想框也就消失了)

2018年9月1日 03:16

編輯回答

薄荷綠

當(dāng)焦點不在bigbox里面任何元素里面，或者要搜索的時候隱藏

2018年7月13日 16:33

編輯回答

只愛你

或許可以換一個事件，比如點擊下面的列表項之后讓聯(lián)想詞匯隱藏？

2018年2月3日 14:36

編輯回答

薄荷綠

把原來綁定在oTxt上的blur和focus事件移到id='hh'的div。
這樣應(yīng)該可以解決你的問題

2018年4月23日 19:22

編輯回答

怣痛

這是目前的做法，點擊bigbox以外的區(qū)域隱藏oUl（提示詞顯示區(qū)域），點擊bigBox顯示oUl，在此期間阻止事件冒泡；

除此之外各位還能提供其他方法嘛

    oBtn.onclick = function(e){
        var url = "https://cn.bing.com/search?q=" + oTxt.value;
        location.href = url;
        stopPro(e);
    }
    oBigBox.onclick = function(e){
        oUl.style.display = "block";
        stopPro(e);
    }
    document.onclick = function(e){
        oUl.style.display = "none";
        stopPro(e);
    }
    function stopPro(e){
        var e = evt || event;
        e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
    }

2017年6月20日 13:43