项目实现：还原百度搜索功能；

项目原理：利用json回调页面传参;

什么是jsonp：就是利用<script>标签的src地址，让目标页面回调本地页面，并且带入参数，也解决了跨域问题；

代码如下：

html（css代码不提供）

<div class="box"> <input type="text" /> <div class="ssk"></div> <button>×</button> </div>

js

var script,ids; $(".box>input").on("input",inputHandler) function inputHandler(e){ if (ids) return; ids = setTimeout(function () {//节流 clearTimeout(ids); ids=0; if (script) { //删除上一次创建script标签 script.remove(); script = null; } script=$("<script><\/script>").attr("src",`https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd= 　　　 ${$(".box>input").val()}　　　　　　　　　　　　&json=1&p=3&sid=22084_1436_13548_21120_22036_22073&req=2&csor=0&cb=callback` ).appendTo("body"); // 点击x按钮删除搜索框内容，并且隐藏button按钮 $("button").click(function () { $("input").val(""); $("button").css("display", "none"); }); // 如果搜索框为空则把x按钮隐藏 if ($("input").val().length === 0) { $("button").css("display", "none"); } else { $("button").css("display", "block"); } }, 500); } function callback(data) { if (data) { $(".box>.ssk").css("display", "block"); } // 删除上一次的搜索列表 if ($(".ssk").children().length !== 0) { $("a").remove(); } // 遍历数组内容输出 $.each(data.s, function (index, item) { $("<a>"+item+"</a>").appendTo(".box>.ssk"); $("a").attr('href','https://ponent)处理,服务器才能给出对应内容的超链接

日常百度搜索都有wd属性，改变wd属性即可得到搜索

最终效果：

以上就是jQuery使用jsonp实现百度搜索的示例代码的详细内容，更多关于jQuery实现百度搜索的资料请关注其它相关文章！