运用js跨域实现百度搜索

梦里梦外; 2022-01-05 12:55 348阅读 0赞

1.  需求分析：设计一个搜索框，当在文本框中输入内容的时候，点击按钮就可以进行搜索，跨域访问百度的搜索
2.  设计思路：封装跨域访问函数，获取文本框元素的内容，绑定跨域访问函数，当点击执行的时候就会执行跨域访问，将搜索的结果显示为百度的搜索数据
3.  实现代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>百度搜索</title>
    </head>
    <body>
    
    <input type="text" id="q" placeholder="请输入要搜索的内容">
    <button id="btn">搜索</button>
    <ul id="list">
    
    </ul>
    
    </body>
    <script>
    
    function fn(data){ 
    
        var ul = document.getElementById("list");
        var html = "";
        if(data.s.length){ 
            ul.style.display = "block";
            for(var i=0;i<data.s.length;i++){ 
                html += '<li><a target="_blank" href="http://www.baidu.com/s?wd='+data.s[i]+ '">'+ data.s[i]+'</a></li>';
               // html += '<li><a target="_blank" href="http://www.baidu.com/s?wd='+data.s[i]+'">'+ data.s[i] +'</a></li>';
            }
            ul.innerHTML = html;
        }else{ 
            ul.style.display = "none";
        }
    }
    
    
    let q = document.getElementById("q");
    q.onkeyup = function(){ 
        if(this.value != ''){ 
            var script = document.createElement("script");
            script.src = 'http://suggestion.baidu.com/su?wd='+this.value+'&cb=fn';
            document.body.appendChild(script);
        }else{ 
            ul.style.display = "none";
        }
    }
    
    
    </script>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，348人围观）

还没有评论，来说两句吧...

相关阅读

相关 js实现百度搜索框提示（跨域）

效果图如下： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9n

末蓝、/ 2023年10月10日 10:04/ 0 赞/ 40 阅读

相关实现百度下拉菜单实例（利用jsonp跨域请求百度数据接口）

JSONP：是JSON with padding（填充式JSON或参数式JSON）的简写，它由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数，回调函

Dear 丶/ 2022年05月28日 00:28/ 0 赞/ 181 阅读

相关 jQuery实现百度搜索框

最近项目需求，写了一个类似百度搜索框的功能。把代码整理了一遍，然后分享出来给大家看看，如果有不对的地方请多指教。实现效果![70][] 使用的语言：html，css,

忘是亡心i/ 2022年05月18日 10:40/ 0 赞/ 382 阅读

相关 js跨域请求之jsonp原理和运用

1、js请求后端服务时，域名不同或域名相同端口不同都是跨域； 2、无论哪个浏览器js都不能跨域请求后端服务，解决办法为jsonp；jsonp不是新技术，只是一个解决方案；即j

爱被打了一巴掌/ 2022年05月10日 14:40/ 0 赞/ 427 阅读

相关 js模拟百度搜索

总体思路：用户在文本框里输入的是什么，就来数组中遍历每个元素，找输入的内容是否在遍历到的元素里面，如果在，就把这个元素做成li标签加到ul里，如果不在就不

怼烎@/ 2022年04月25日 02:22/ 0 赞/ 300 阅读

相关 js--搜索框提示仿百度

大概要实现的内容这是一个很简单的示例，服务器端只是用了一个jsp页面，返回的类型为xml。先讲下是怎么回事，就是在浏览器端，通过ajax请求，发送一串英文字母，服务

客官°小女子只卖身不卖艺/ 2022年04月17日 04:19/ 0 赞/ 334 阅读

相关解决跨域问题，实例调用百度地图

1.什么是跨域？浏览器对于javascript的同源策略的限制,例如a.com下面的js不能调用b.com中的js,对象或数据(因为a.com和b.com是不同域),所

清疚/ 2022年04月03日 15:28/ 0 赞/ 498 阅读

相关运用js跨域实现百度搜索

1. 需求分析：设计一个搜索框，当在文本框中输入内容的时候，点击按钮就可以进行搜索，跨域访问百度的搜索 2. 设计思路：封装跨域访问函数，获取文本框元素的内容，绑定跨域访问

梦里梦外;/ 2022年01月05日 12:55/ 0 赞/ 349 阅读

相关 js实现模拟百度搜索

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

快来打我*/ 2021年12月17日 11:33/ 0 赞/ 389 阅读

相关跨域结合百度提示词接口实现搜索显示，arttamplate模板使用，jQuery跨域

今天做一个简单的百度提示词的跨域准备三个文件一：html页面二：jquery.js文件三:template-web.js文件 template-web.js下

╰+哭是因爲堅強的太久メ/ 2021年09月18日 15:00/ 0 赞/ 304 阅读