項目實現:還原百度搜索功能;
項目原理:利用json回調頁面傳參;
什么是jsonp:就是利用<script>標簽的src地址,讓目標頁面回調本地頁面,并且帶入參數,也解決了跨域問題;
代碼如下:
html(css代碼不提供)
1 <div class="box"> 2 <input type="text" /> 3 <div class="ssk"></div> 4 <button>×</button> 5 </div>
js
1 var script,ids; 2 $(".box>input").on("input",inputHandler) 3 function inputHandler(e){ 4 if (ids) return; 5 ids = setTimeout(function () {//節流 6 clearTimeout(ids); 7 ids=0; 8 if (script) { //刪除上一次創建script標簽 9 script.remove(); 10 script = null; 11 } 12 script=$("<script><\/script>").attr("src",`https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd= 13 ${$(".box>input").val()}
&json=1&p=3&sid=22084_1436_13548_21120_22036_22073&req=2&csor=0&cb=callback` 14 ).appendTo("body"); 15 // 點擊x按鈕刪除搜索框內容,并且隱藏button按鈕 16 $("button").click(function () { 17 $("input").val(""); 18 $("button").css("display", "none"); 19 }); 20 // 如果搜索框為空則把x按鈕隱藏 21 if ($("input").val().length === 0) { 22 $("button").css("display", "none"); 23 } else { 24 $("button").css("display", "block"); 25 } 26 27 }, 500); 28 } 29 function callback(data) { 30 if (data) { 31 $(".box>.ssk").css("display", "block"); 32 } 33 // 刪除上一次的搜索列表 34 if ($(".ssk").children().length !== 0) { 35 $("a").remove(); 36 } 37 // 遍歷數組內容輸出 38 $.each(data.s, function (index, item) { 39 $("<a>"+item+"</a>").appendTo(".box>.ssk"); 40 $("a").attr('href','https://www.baidu.com/s?tn=02003390_43_hao_pg&isource=infinity&wd='+encodeURIComponent(item)); 41 }); 42 // 失去焦點隱藏搜索列表 43 $(".box>.ssk").on("mouseleave", function () { 44 $(".box>.ssk").css("display", "none"); 45 }); 46 }
日常百度搜索都有wd屬性,改變wd屬性即可得到搜索
最終效果: