仿百度搜索和三六零搜索点击切换搜索引擎,jquery,ajax_html点击列表切换搜索引擎怎么写-CSDN博客

本文链接：https://blog.csdn.net/weixin_44796453/article/details/90484803

效果展示

在这里插入图片描述

代码展示

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
      *{
         margin: 0;
         padding: 0;
         background-color: #333;
      }
      #box{
         width:500px;
         height: 30px;
         margin: 200px auto;
         border: 1px solid #000;
         position: relative;
      }
      ul{
         float: left;
         width: 20%;
         height: 100%;
         background-color: #e4393c;
         list-style: none;
      }
      ul>li{
         text-align: center;
         background-color: #e4393c;
         float: left;
         width:100%;
         cursor: pointer;
         line-height: 30px;
         height: 100%;
         display: none;
         color: #fff;

      }
      ul>li:first-child{
         margin-bottom: 10px;
         display: block;
      }
      input{
         width: 60%;
         background-color: #fff;
         text-indent: 10px;
         float: left;
         height:100%;
         border: none;
      }
      button{
         float: left;
         width: 20%;
         height:100%;
         background-color: #f00;
         border: none;
         vertical-align: center;
         cursor: pointer;
         color: #fff;

      }
      ol.result{
         list-style: none;
         width: 60%;
         box-sizing: border-box;
         position: absolute;
         top: 30px;
         border: 1px solid #ccc;
         left:20%;
         margin-top: -1px;

      }
      ol.result>li{
         height: 30px;
         background-color:#fff;
         text-indent: 10px;
         line-height: 30px;
         border-bottom: 1px solid #ccc;
         overflow: hidden;
      }
   </style>
</head>

<body>
   <div id="box">
      <ul class="web">
         <li>百度</li>
         <li>百度</li>
         <li>三六零</li>
      </ul>
      <input type="text" placeholder="请输入搜索内容">
      <button>提交</button>
      <ol class="result">
         <!-- <li>哈哈</li> -->
      </ol>
   </div>

   <script src="jquery-1.12.0.js"></script>
   <script>
   $(function () {
      var boo = true;

      $("ul>li").click(function (event) {
         if (boo) {
            $("ul>li").show();
            boo = false;
         } else {

            $("ul>li").eq(0).html($(this).html()).siblings('li').hide();
            boo = true;
         }
      });

      $("input")[0].oninput=function () {
         if ($("ul>li:first-child").html() == "百度") {
            $.ajax({
               url: "https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=1460,21080,29064,28519,29099,28722,28964,28832,28585,26350&wd=" + $("input").val() + "&csor=2&pwd=nide&",
               dataType: "jsonp",
               jsonp: "cb",
               success: function (data) {
                  $("ol").empty();
                  var arr = data.g?data.g:[];
                  var aaa=arr.length>0?arr.length:0;
                  for (var i = 0; i < aaa; i++) {
                     var $newli = $("<li></li>");
                     $newli.html(arr[i].q);
                     $("ol").append($newli);
                  }
               }
            })


         } else if ($("ul>li:first-child").html() == "三六零") {
            $.ajax({
               url: "https://sug.so.360.cn/suggest?encodein=utf-8&encodeout=utf-8&format=json&fields=word&word=" + $("input").val() + "&huid=10NRAeE9rdeMRe4pqbdHXQ8adyRCAwO57b4WtR9xZ163Q%3D",
               dataType: "jsonp",
               success: function (data) {
                  $("ol").empty();
                  var arr = data.result?data.result:[];
                  var aaa=arr.length>0?arr.length:0;
                  for (var i = 0; i < aaa; i++) {
                     var $newli = $("<li></li>");
                     $newli.html(arr[i].word);
                     $("ol").append($newli);
                  }
               }
            })
         }
      }
      //搜索结果点击事件

      $("ol").on('click', 'li', function(event) {
                  $("input").val($(this).html());
         $("ol").empty();
         /* Act on the event */
      });


      //搜索按钮点击事件
      $("button").click(function(){
         if($("ul>li:first-child").html() == "百度"){12
            var word=$("input").val();
            location.assign("https://www.baidu.com/s?tn=02003390_43_hao_pg&isource=infinity&iname=baidu&itype=web&ie=utf-8&wd="+word);
         }else if($("ul>li:first-child").html()=="三六零"){
            var word=$("input").val();
            location.assign("https://www.so.com/s?ie=utf-8&fr=none&src=360sou_newhome&q="+word);
         }
     
      })


   })
   </script>
</body>

</html>