小案例：百度搜索

百度搜索案例（联网情况下使用）
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .block {
            width: 600px;
            height: 35px;
            border: 1px solid #000;
            margin: auto;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            font-size: 0;
        }

        .block > input {
            position: absolute;
            left: 0;
            top: 0;
            border-style: none;
            outline: none;
            box-sizing: border-box;
            width: 500px;
            height: 35px;
            font-size: 1rem;
            padding-left: 0.5rem;
        }

        .block > span {
            position: absolute;
            right: 0;
            font-size: 1rem;
            display: inline-block;
            width: 100px;
            height: 35px;
            color: #fff;
            background: #15a0ff;
            text-align: center;
            line-height: 35px;
        }

        .nav {
            font-size: 0.9rem;
            list-style: none;
            position: absolute;
            top: 35px;
            left: -1px;
            width: 500px;
            border: 1px solid #979797;
        }

        .nav > li {
            padding-left: 0.5rem;
            line-height: 30px;
        }
        .nav > li:hover {
            background: #e4e4e4;
        }
        .nav a {
            color: #000;
            font-weight: bold;
            text-decoration: none;
        }
  .bgcolor {
            background: #e4e4e4;
        }
    </style>
</head>
<body>
<div class="block">
    <input id="ipt" type="text"/>
    <span id="btn">百度一下</span>
    <ul class="nav">
    </ul>
</div>
<script>
 
    var script = null;
    var isshu = false;
    var index = 0;
    var ipt = document.getElementById("ipt");
    var btn = document.getElementById("btn");
    var nav = document.getElementsByClassName("nav")[0];
    var api = " https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su";
    ipt.addEventListener("keyup", getInput(api));//创建一个监听事件

    ipt.addEventListener("keydown", function (e) {
        if (e.keyCode == 38 || e.keyCode == 40) {
            e.preventDefault();//处理事件默认行为
        }
    })
    btn.addEventListener("click", function () {
        location.href = "https://www.baidu.com/s?wd=" + ipt.value;
    })
    document.body.addEventListener("keyup", function (e) {
        if (!nav.children.length)return;
        if (e.keyCode == 38) {
            isshu = true;
            index--;
            if (index < 0) {
                index = nav.children.length - 1;
            }
            nav.children[index + 1 > nav.children.length - 1 ? 0 : index + 1].className = "";
            nav.children[index].className = "bgcolor";
            ipt.value = nav.children[index].innerText;
        }
        else if (e.keyCode == 40) {
            isshu = true;
            if (document.getElementsByClassName("bgcolor").length) {
                index++;
            }
            if (index > nav.children.length - 1) {
                index = 0;
            }
            nav.children[index - 1 < 0 ? nav.children.length - 1 : index - 1].className = "";
            nav.children[index].className = "bgcolor";
            ipt.value = nav.children[index].innerText;
        }
    });

    function getInput(src) {
        var t;
        return function () {
            isshu = false;
            var that = this,
                args = arguments;
            clearTimeout(t);
            t = setTimeout(function () {
                //jsonp ipt.value
                jsonp.apply(that, [args, src])
            }, 500);
        }
    }

    //封装一个jsonp方法
    function jsonp() {
        if (isshu) {
            return;
        }
        //动态创建一个jsonp方法
        if (script) {
            script.remove();
        }
        script = document.createElement("script");
        script.src = arguments[1] + "?" + "wd=" + this.value + "&cb=getData";
        document.body.appendChild(script);
    }
    //回调函数
    function getData(res) {
        nav.innerHTML = "";
        res.s.forEach(function (val, index) {
            var lilist = document.createElement("li");
            lilist.innerHTML = "<a href='https://www.baidu.com/s?wd=" + val + "'>" + val + "</a>";
            nav.appendChild(lilist);
        });
        index = 0;
    }
</script>
</body>
</html>
就是干！！
发布了35 篇原创文章 · 获赞 5 · 访问量 831
私信关注
小案例：百度搜索

猜你喜欢
