js提示框代码（js的三种弹出式消息提醒）

这个功能的实现主要使用了jsonp跨域访问, 然后通过回调函数来将搜索到的关联内容显示出来 。

jsonp(jsonwith padding)是一个非官方的协议，它允许在服务器端集成script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是jsonp简单的实现形式）。

回调函数：当一个函数作为另一个函数的参数时，那么这个函数就是回调函数。

效果如下

代码如下

<script type="text/javascript">
      var txt = document.getelementbyid('text');
      var oul = document.getelementbyid('list');
      var obtn = document.getelementbyid('btn');

      txt.onkeyup = function () {
        oul.innerhtml = '';
        oul.style.display = 'none';
        var val = txt.value;
        var oscript = document.createelement('script'); //动态创建script标签
        oscript.src =
          'https://sp0.baidu.com/5a1fazu8aa54nxgko9wtanf6hhy/su?wd=' +
          val +
          '&cb=callback';
        //添加链接及回调函数
        document.body.appendchild(oscript); //添加script标签
        document.body.removechild(oscript); //删除script标签
      };
      //回调函数

      function callback(data) {
        if (data.s && data.s.length) {
          const res = data.s;
          res.foreach(function (value) {
            var oli = document.createelement('li');
            oli.innerhtml =
              '<a style="display:inline-block;width:100%" href="https://www.baidu.com/s?wd=' +
              value +
              '">' +
              value +
              '</a>';
            oul.appendchild(oli);
          });

          oul.style.display = 'block';
        }
      }
      //点击跳转到百度页面，并搜索其中内容
      obtn.onclick = function () {
        var val = txt.value;
        location.href = 'http://www.baidu.com.cn/s?wd=' + val + '&cl=3';
      };
    </script>