<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>JsonP的访问百度搜索建议</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 href="http://wangjunmechdevise.blog.163.com/blog/">1</a></li>
<li><a href="http://wangjunmechdevise.blog.163.com/blog/">1</a></li>
<li><a href="http://wangjunmechdevise.blog.163.com/blog/">1</a></li>
<li><a href="http://wangjunmechdevise.blog.163.com/blog/">1</a></li>
-->
</ul>
<script>
function maiov(data){
// alert (data.s[0]);//弹出一个数据看看
var Tips = document.getElementById("tips");
var html = '';
//alert (data.s[2]);
//alert (data.s.length);
var items=data.s.length;//得到的Json数据中S数组的长度
// alert(items);
if(items){
Tips.style.display = 'block';
for (var i=1;i<items;i++){
html +='<li><a href="http://wangjunmechdevise.blog.163.com/blog/">'+data.s[i]+'</a></li>';
}
// 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);//弹出输入的内容
// // console.log(oScript);
// document.body.appendChild(oScript);
// }else{
// oUl.style.display = 'none';
// }
// }
//上面的代码onkeyup事件不能监听中文
// 在中文输入法下监听不到keycode
document.onkeydown=function(event){
var event=event||window.event;
document.getElementById("showkey").innerHTML=event.keyCode;
};
}
//尝试解决上面的代码不能监听中文输入的问题,给输入框绑定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);//弹出输入的内容
// console.log(oScript);
document.body.appendChild(oScript);
}else{
oUl.style.display = 'none';//如果输入框无内容则不显示建议列表
}
}
</script>
<hr>
<p>keycode监听结果</p>
<p id='showkey'></p>
<input type="text" id="a" oninput="aa(event)" onporpertychange="aa(event)" value="通过绑定oninput和onporpertychange来监听即可" />
<script type="text/JavaScript">
function aa(e){
alert('输入变化');
}
</script>
</body>
</html>
网友评论