百度联想词搜索框完整实现

讲解如何利用百度接口仿写一个搜索联想词功能

1.首先写一个输入框（html部分十分简单）

    <div class="wrapper">
        <input type="text " id="btn">
        <ul>
        </ul>
    </div>

2.给它一个样式，可以贴近百度搜索框的样子。

        * {
            padding: 0;
            margin: 0;
        }
        .wrapper {
            position: absolute;
            margin-left: -260px;
            left: 50%;
            top: 30%;
        }
        #btn {
            width: 560px;
            padding: 10px 10px;
            border: 1px solid rgb(45, 129, 240);
        }

3.下面我们来写js部分

我们需要给输入浪添加一个事件—onkeyup（会在键盘按键被松开时发生。）

步骤一：测试onkeyup事件，以识别我们输入的内容

        btn.onkeyup = function () {
            var value = this.value;
            console.log(value);
            }

效果如下：

步骤二：将我们输别的内容，引入联想词条。

        btn.onkeyup = function () {
            var value = this.value;
            // console.log(value);
            var oScript = document.createElement('script');
                oScript.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + value + '&cb=aa'
                document.body.appendChild(oScript)
        }
        function aa(data) {
            console.log(data);
            }

这里我们所看到地址文件，是这样获取的：

这么长的地址我们并不是全要的，我们只要wd=和cb等于部分 ：比如：

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=onkeyup&sugmode=2&json=1&p=3&sid=1443_26909_21081_26350_26925&req=2&bs=onkeyup&pbs=onkeyup&csor=7&pwd=onkeyup&cb=jQuery1102041548312872624815_1533627722834&_=1533627722871

它经过删除后为：https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=onkeyup&&cb=jQuery

步骤三：从输出我们可以看到，我们只需要传回来的数据s数组，所以我们对他进行遍历，拼接到<li>之中，并加他插入<ul>之中

        function aa(data) {
            console.log(data);
            oUl.style.display = 'block';
             var list = data.s;
             var str = '';
             list.forEach(function (ele, index) {
                str += '<li>' + ele + '</li>';
             });
             oUl.innerHTML = str;
             }

这样最基本的联想词就写出来了，但是我们需要对他进行包装。

步骤四：解决输入框无内容时列表消失问题

        btn.onkeyup = function () {
            var value = this.value;
            if (value) {
                var oScript = document.createElement('script');
                oScript.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + value + '&cb=aa'
                document.body.appendChild(oScript);
                oScript.remove();//大家在之前会发现，随着你输入的东西越多，你创建的script标签就越多，我们在获取到它后直接移除即可。
            } else if(value == 0){
                oUl.style.display = 'none';
            }
        }

步骤五：在单一的li列表里，插入a标签，将其引流，可以做到与真实搜索功能一样。

        function aa(data) {
            oUl.style.display = 'block';
            var list = data.s;
            var str = '';
            if (list.length > 0) {
                list.forEach(function (ele, index) {
                    str += '<li><a href ="https://www.baidu.com/s?wd=' + ele +  '">' + ele + '</li>';
                })
                oUl.innerHTML = str;
            }else { 
                oUl.style.display = 'none';
            }

        }

千万别忘了，这里我没有讲解css的样式大家可以自由发挥，而且<a>自带样式，你需要自己调整，消除他的样式，整个布局跟随你的想法走，希望大家可以学会这一小demo。