jsonp模拟百度搜索框

代码如下：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="Anthor" content="" />
        <title>Title</title>
        <style>
            *{ margin:0; padding:0; font-family:"Microsoft yahei",serif;}
            li{ list-style-type: none;}
            #box{
                width: 400px;
                margin: 100px auto;
            }
            #inp{
                display: block;
                width: 396px;
                height: 40px;
                text-indent: 10px;
            }
            #list{
                border: 1px solid #bbb;
                border-top: none;
                box-shadow: 1px 1px 2px #999;
            }
            #list li{
                height: 30px;
                line-height: 30px;
                text-indent: 10px;
            }
            #list li a{
                display: block;
                height: 100%;
                text-decoration: none;
                color: #333;
                font-size: 14px;
                cursor: default;
            }
            #list li a:hover,#list li a.active{
                background: #ddd;
            }

        </style>
    </head>
    <body>
        <div id="box">

            <input id="inp" type="text" />
            <ul id="list">
               <!-- <li><a href="">aaaa</a></li>
                <li><a href="">aaaaa</a></li>-->
            </ul>

        </div>

        <script>

            var oInp = document.getElementById("inp"),
                oList = document.getElementById("list");

            //事件，当input表单内容发生的改变的时候触发
            oInp.oninput = eFn;
            oInp.onfocus = function (ev) {
                eFn.call(this);
                this.sVal = this.value;
                this.index = 0;
            };
            oInp.onblur = function () {
                setTimeout(function () {
                    oList.innerHTML = "";
                },200);
            };
            oInp.onkeyup = function (ev) {
                ev = ev || window.event;
                var keyCode = ev.keyCode;
                var val = this.value;
                if ( val ){

                    if ( keyCode !== 40 && keyCode !== 38 ){
                        this.sVal = val;
                        this.index = 0;
                    }
                    if ( keyCode === 13 ){
                        window.location.href = "https://www.baidu.com/s?wd="+val;
                        this.blur();
                    }else if ( keyCode === 38 || keyCode === 40 ){
                        UpOrDown.call(this,keyCode);
                        ev.preventDefault && ev.preventDefault();
                        return false;
                    }
                }
            };

            //上下按键的事件处理
            function UpOrDown(keyCode){
                var aLi = oList.children;
                var length = aLi.length;

                for (var i = 0; i < length; i++) {
                    aLi[i].children[0].className = "";
                }

                if ( keyCode === 38 ){
                    this.index --;
                    if(this.index<0)this.index=length;
                }else{
                    this.index ++;
                    this.index %= length+1;
                }
                if ( this.index ){
                    this.value = aLi[this.index-1].children[0].innerHTML;
                    aLi[this.index-1].children[0].className = "active";
                }else{
                    this.value = this.sVal;
                }
            }


            //请求jsonp的事件函数
            function eFn() {
                var val = this.value;

                if ( val ){
                    //要加载这一段js，也就是要创建一个script标签！！
                    //https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd= &cb=gd

                    //清除前一个
                    var dom = document.getElementById("PAOPAO_JSONP");
                    if ( dom )document.body.removeChild(dom);

                    //再创建当前的
                    var oS = document.createElement("script");
                    oS.id = "PAOPAO_JSONP";
                    oS.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+val+"&cb=paopao";
                    document.body.appendChild(oS);

                }else{
                    oList.innerHTML = "";
                }
            }

            //接收处理的函数
            function paopao( msg ) {
                //清理ul内容
                oList.innerHTML = "";
                //获取jsonp传参里面的数据
                var data = msg.s;
                //遍历生成LI，并放入UL
                for (var i = 0,length=data.length; i < length; i++) {
                    var wd = data[i];
                    var oLi = document.createElement("li");
                    oLi.innerHTML = "<a target='_blank' href='https://www.baidu.com/s?wd="+wd+"'>"+wd+"</a>";

                    //实现点击联想词之后输入框内容的改变
                    oLi.onclick = function () {
                        oInp.value = this.children[0].innerHTML;
                    };
                    oList.appendChild( oLi );
                }
            }

        </script>

    </body>
</html>
效果图如下：
ajax
返回的是json类型的字符串，可以转换成json进行数据处理
jsonp
没有跨域问题
相当于访问了一个JS文件地址
jsonp模拟百度搜索框

猜你喜欢
