输入框内输入内容，实时显示搜索内容

点击搜索内容跳转播放页面

处理流程

问题和功能实现大致分为六部分：

　　　　1、什么时候请求数据或者触发请求数据的条件是什么?

　　　　2、怎么去请求数据？

　　　　3、数据怎么格式处理？

　　　　4、处理的数据怎么放到页面中？

　　　　5、实现键盘按键切换下拉提示

　　　　6、enter按键打开新页面，跳转到搜索结果

界面布局

• Mac窗口样式
  • 窗口头部
    • 三个按钮
  • 搜索表单
    • 一只小鸡
    • inout 输入框
    • button 按钮

    <div id="Mac-windows">
        <div id="windows-head">
            <button id="exit"></button>
            <button id="small"></button>
            <button id="max"></button>
        </div>
        <form target="_self" id="search">
            <img src="./img/images-02.png" />
            <input type="text" name="" id="search-box" value="" autocomplete="off" />
            <input type="submit" value="搜索" id="search-button" />
        </form>
    </div>
    <div id="hint">
        <ul id="data_result"></ul>
    </div>

主要代码

常用函数封装

    var getDOMid = function(id) {
        return document.getElementById(id);
    }
    var getDOMClass = function(cla) {
        return document.getElementsByClassName(cla);
    }
    var getElementLeft = function(element) {
        var actualLeft = element.offsetLeft; //offsetLeft获取父元素左边的距离
        var current = element.offsetParent;
        while (current != null) {
            actualLeft += current.offsetLeft;
            current = current.offsetParent;
        }
        return actualLeft;
    }

    var getElementTop = function(element) {
            var actualTop = element.offsetTop; //获取父元素顶部距离
            var current = element.offsetParent;
            while (current != null) {
                actualTop += current.offsetTop;
                current = current.offsetParent;
            }
            return actualTop;
        }

封装事件函数

var addEvent = function(id, event, fn) {
            var el = getDOMid(id) || document;
            if (el.addEventListener) { //解决浏览器兼容问题
                el.addEventListener(event, fn, false); //适合非IE浏览器
            } else {
                el.attachEvent('on' + event, fn); //适合IE浏览器
            }
        }

AJAX

    var ajaxGet = function(url, callback) {
        var _xhr = null;
        // 考虑兼容性
        if (window.XMLHttpRequest) {
            _xhr = new XMLHttpRequest(); //非IE浏览器
        } else if (window.ActiveXObject) {
            _xhr = new ActiveXObject("Msxml2.XMLHTTP"); //IE浏览器
        }
        // 监听连接事件
        _xhr.onreadystatechange = function() {
            if (_xhr.readyState == 4 && _xhr.status == 200) {
                callback(JSON.parse(_xhr.responseText)); //JSON.parse()是把字符串转成js可识别对象
            }
        }
        _xhr.open('get', url, true);
        _xhr.send();
    }

提示框处理

提示框输入自动显示

addEvent('search-box', 'keyup', function() {
        var _dom = getDOMid('hint');
        _dom.style.top = getElementTop(getDOMid('search-box')) + 38 + 'px';
        _dom.style.left = getElementLeft(getDOMid('search-box')) + 'px';
        _dom.style.width = getDOMid('search-box').offsetWidth + 'px';
        _dom.style.position = 'absolute';
        _dom.style.display = 'block';
    });

点击其他位置提示框隐藏

​

 document.body.onclick = function() {
        getDOMid('hint').style.display = 'none';
    }

小鸡动画设置

• 鼠标移入—>小鸡向前移动，换图片

   var chick = document.getElementsByTagName('img')[0];
        chick.style.left = (getDOMid('search-box').offsetWidth / 2) - (chick.offsetWidth / 2) + 'px';
        var n = parseInt(chick.style.left);
        addEvent('search-box', 'mousemove', function() {
            chick.src = "./img/images-01.png";
            var time = setInterval(function() {
                if (n < 40) {
                    clearInterval(time);
                } else {
                    n -= 40;
                    chick.style.left = n + 'px';
                }
            }, 100);
        });
  

• 鼠标移出—>小鸡回归原位

   addEvent('search-box', 'mouseout', function() {
          chick.src = "./img/images-02.png";
          var box_width = parseInt((getDOMid('search-box').offsetWidth / 2) - (chick.offsetWidth / 2));
          if (n < 30) {
              var time = setInterval(function() {
                  n += 80;
                  if (n > box_width) {
                      clearInterval(time);
                  } else {
                      chick.style.left = n + 'px';
                  }
              }, 100)
          }
      });
  

如何获取网站API？

直接从开发者工具，监控网络，找到请求地址。

比如获取百度查询数据接口

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=123&json=1&p=3&sid=26525_1468_21124_18559_26350_22073&req=2&bs=sp0.baidu.com%20API&pbs=sp0.baidu.com%20API&csor=3&pwd=s%27s%27s&cb=jQuery1102009673098249865686_1532417299552&_=1532417299572

再把api缩减了一下，删除了大部分暂时用不上的参数。

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=关键词&json=1&p=3&cb=fn

必应搜索

https://cn.bing.com/search?q=

http://api.bing.com/qsonhs.aspx?q=

百度搜索

https://www.baidu.com/s?wd=

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=关键词&son=1&p=3&cb=fn

网盘搜索API

http://unionsug.baidu.com/su?cb=empty&wd=关键字&p=3&json=1

http://www.panduoduo.net/s/name/关键字

用原生js的确麻烦，会遇到请求失败，同源策略问题，得要学会用JSONP解决。。。