ajax 模仿百度下拉 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#text{
    width:300px;
    height:30px;
    padding:5px;
    border:1px solid #f90;
    font-size:16px;
    }
#ul1{
    width:310px;
    padding:0;
    margin:0;
    border:1px solid #f90;
    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 may(data)
{
    var oul1 = document.getElementById('ul1');
    var html = '';
    
    if(data.s.length)
    {
        oul1.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>'
        }
        oul1.innerHTML = html;
    }
    else
    {
        oul1.style.display = 'none';
    }
}

window.onload = function ()
{
    var otext = document.getElementById('text');
    var oul1 = document.getElementById('ul1');
    
    otext.onkeyup = function ()
    {
        if(this.value != '')
        {
            var oscript = document.createElement('script');
            oscript.src = 'http://suggestion.baidu.com/su?wd='+this.value+'&cb=may';
            document.body.appendChild(oscript);
        }
        else
        {
            oul1.style.display = 'none';
        }
    }
}

</script>
</head>

<body>
<input id="text" type="text">

<ul id="ul1">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
</ul>
</body>
</html>

 

posted @ 2015-02-25 16:02  mayufo  阅读(165)  评论(0)    收藏  举报