jsonp版 前端开发 百度搜索框的设计

前端开发是不是可以代替设计|前端分开发和设计方案|设计转前端开发

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>web前端设计与开发贯穿任务</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        #sch {
            width: 200px;
            margin: 50px auto;
        }
        #tex {
            width: 200px;
            height: 20px;
        }
        ul {
            border: 1px solid #eee;
            width: 202px;
            display: none;
        }
        ul li {
            list-style: none;
            border: 1px solid #ddd;
            width: 200px;
            height: 20px;
            text-align: left;
            line-height: 20px;
        }
        ul li:hover {
            background: orange;
        }
    </style>
</head>
<body>
    <div id=’sch’>
        <input type=”text” placeholder=’请输入关键字’ id=’tex’>
        <ul>
            <!– <li>1</li>
<li>2</li>
<li>3</li>
<li>4</li> –>
        </ul>
    </div>
</body>
<script>
    var oTex = document.getElementById(‘tex’);
    var oUl = document.getElementsByTagName(‘ul’)[0];
    function baiduSU(data) {
        var d = data.s
        if (d.length) {
            oUl.style.display = ‘block’;
            var str = ”;
            for (var i = 0; i < d.length; i++) {
                str += ‘<li>’ + d[i] + ‘</li>’
            }
            oUl.innerHTML = str;
        } else {
            oUl.style.display = ‘none’;
        }
    }
    oTex.onkeyup = function () {
        if (oTex.value != ”) {
            var oScript = document.createElement(‘script’);
            oScript.src = ‘http://unionsug.baidu.com/su?wd=’ + oTex.value + ‘&cb=baiduSU’;
            document.body.appendChild(oScript);
        } else {
            oUl.style.display = ‘none’;
        }
    }
</script>
</html>

前端开发和设计的发展前途|web前端设计与开发贯穿任务|前端开发课程设计

» 本文来自:前端开发者 » 《jsonp版 前端开发 百度搜索框的设计》
» 本文链接地址:https://www.rokub.com/4615.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!