異步跨域JsonP輸入框輸入建議 & Keyup事件在中文輸入下不能及時(shí)監(jiān)聽(tīng)輸入的解決辦法

<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>JsonP的訪問(wèn)百度搜索建議</title>
<style type="text/css">
  #q{width:500px;height: 30px;padding: 5px;border:1px solid red;background: lightblue; font-size: 30px;}
  #tips{border: 1px solid #f90;width:510px;margin:0;padding:0;}
  li a { line-height: 30px; padding: 3px;color: red;text-decoration: none; display: block }
  li a:hover{ background: lightblue; }
</style>

</head>
<body>

<input type="text" name="q" id="q" oninput="aaaa(event)" onporpertychange="aaaa(event)" >


<ul id='tips'>
<!-- <li><a >1</a></li>
<li><a >1</a></li>
<li><a >1</a></li>
<li><a >1</a></li>
 -->
</ul>
<script>
function maiov(data){
    // alert (data.s[0]);//彈出一個(gè)數(shù)據(jù)看看
    var Tips = document.getElementById("tips");
    var html = '';
            //alert (data.s[2]);
            //alert (data.s.length);
    var items=data.s.length;//得到的Json數(shù)據(jù)中S數(shù)組的長(zhǎng)度
    // alert(items);
    if(items){
        Tips.style.display = 'block';
        for (var i=1;i<items;i++){            
            html +='<li><a ;
        }
        // alert(html);
        Tips.innerHTML = html;
    }else{
        // oUl.style.display = 'none';
    }
}


 window.onload = function(){
//********************************
    // var oQ = document.getElementById("q");//輸入框變量
    // var oUl = document.getElementById("tips");//提示消息框ul列表變量
    // // oUl.style.display=none;
    // oQ.onkeyup = function(){
    //     // oUl.style.display='block';//提示消息框顯示為塊
    //     // alert(this.value);
    //         if(this.value !=''){
    //         var oScript = document.createElement('script');
    //         oScript.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+this.value+"&cb=maiov";
    //         // alert (this.value);//彈出輸入的內(nèi)容
    //         // console.log(oScript);
    //         document.body.appendChild(oScript);
    //     }else{
    //     oUl.style.display = 'none';
    // }
    // }
//上面的代碼onkeyup事件不能監(jiān)聽(tīng)中文

// 在中文輸入法下監(jiān)聽(tīng)不到keycode
document.onkeydown=function(event){
        var event=event||window.event;
        document.getElementById("showkey").innerHTML=event.keyCode;
};
}

//嘗試解決上面的代碼不能監(jiān)聽(tīng)中文輸入的問(wèn)題,給輸入框綁定oninput和onporpertychange事件

function aaaa(e){
    var oQ = document.getElementById("q");//輸入框變量
    var oUl = document.getElementById("tips");//提示消息框ul列表變量

    if(oQ.value !=''){
            var oScript = document.createElement('script');
            oScript.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+oQ.value+"&cb=maiov";
            // alert (this.value);//彈出輸入的內(nèi)容
            // console.log(oScript);
            document.body.appendChild(oScript);
        }else{
        oUl.style.display = 'none';//如果輸入框無(wú)內(nèi)容則不顯示建議列表
    }
}
</script>
<hr>
<p>keycode監(jiān)聽(tīng)結(jié)果</p>
<p id='showkey'></p>

<input type="text" id="a" oninput="aa(event)" onporpertychange="aa(event)" value="通過(guò)綁定oninput和onporpertychange來(lái)監(jiān)聽(tīng)即可" />
<script type="text/JavaScript">
function aa(e){
alert('輸入變化');
}
</script>
</body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容