百度搜索框

 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#q {width: 300px; height: 30px; padding: 5px; border:1px solid #f90; font-size: 16px;}
#ul1 {border:1px solid #f90; width: 310px; margin: 0;padding: 0; display: none;}
li a { line-height: 30px; padding: 5px; text-decoration: none; color: black; display: block;}
li a:hover{ background: #f90; color: white; }
</style>
<script>
function maiov(data) {
    
    var oUl = document.getElementById('ul1');
    var html = '';
    if (data.s.length) {  //如果有提示信息
        oUl.style.display = 'block'; //显示信息的列表显示
        for (var i=0; i<data.s.length; i++) {  //根据提示信息的长度加载信息
            html += '<li><a target="_blank" href="http://www.baidu.com/s?wd='+data.s[i]+'">'+ data.s[i] +'</a></li>';
　　　　　　 //href的wd的值是提示的信息，显示提示信息
        }
        oUl.innerHTML = html; //把内容添加到文档中
    } else {
        oUl.style.display = 'none'; //如果没有提示信息，提示框不显示
    }
    
}
window.onload = function() {
    
    var oQ = document.getElementById('q');
    var oUl = document.getElementById('ul1');
    
    oQ.onkeyup = function() {  //当输入框键盘抬起的时候
        
        if ( this.value != '' ) {  //如果输入框的值不为空
            var oScript = document.createElement('script');  //动态创建script标签
            oScript.src = 'http://suggestion.baidu.com/su?wd='+this.value+'&cb=maiov';  //动态创建的标签的地址，wd是输入的文字，cb是返回的函数名
            document.body.appendChild(oScript);  //把标签添加到文档中
        } else {
            oUl.style.display = 'none'; //如果键盘抬起的时候输入框的内容为空，提示信息不显示
        }
        
    }
    
}
</script>
</head>

<body>
    <input type="text" id="q" />  //输入框
    <ul id="ul1"></ul>  //提示信息
</body>
</html>

 

posted @ 2017-04-24 11:28  念念念不忘  阅读(209)  评论(0)    收藏  举报