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

末蓝、 2023-10-10 10:04 19阅读 0赞

效果图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM4NzU2OA_size_16_color_FFFFFF_t_70]  
html部分：

<input type="text" id="inp"><button>搜索</button>
        <ul id="oul"></ul>

css部分：

<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
    
        input {
            width: 300px;
            height: 40px;
            margin-left: 550px;
            margin-top: 100px;
        }
    
        button {
            width: 100px;
            height: 45px;
        }
    
        ul {
            margin-left: 550px;
            width: 300px;
            box-shadow: 0px 0px 5px #ccc;
            list-style: none;
            border: 1px solid #ccc;
            border-top: 0px;
            padding: 5px;
        }
    </style>

js部分：

<script>
    
        //url为百度接口，wd后面拼上要搜索的内容。
        var url = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=';
        var oul = document.getElementById('oul');
        var inp = document.getElementById('inp');
        
        //oninput事件，input内value发生改变时触发，事件触发的第一步是先清除上一个script。
        inp.oninput = function () {
            var ourl = url + inp.value + '&cb=fn';
            del();
        //input内无值时，页面无内容。有值的时候发送请求。
            if (this.value != '') {
                var jsonp = document.createElement('script');
                jsonp.src = ourl;
                document.body.appendChild(jsonp);
            } else {
                oul.innerHTML = ' ';
            }
        }
    
        function fn(data) {
        //接收的数据显示之前清除上一次显示的内容。
            oul.innerHTML = ' ';
            for (var i = 0; i < data.s.length; i++) {
                var oli = document.createElement('li');
                oli.innerHTML = data.s[i];
                //为每一项添加点击事件，点击时将点击的内容显示到input中。
                oli.onclick = function () {
                    inp.value = this.innerHTML;
                }
                oul.appendChild(oli);
            }
        };
    
        function del() {
            var scr = document.querySelectorAll('script');
            if (scr.length === 0) {
                return;
            }
            document.body.removeChild(scr[scr.length - 1]);
        }
    </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM4NzU2OA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190924204143474.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM4NzU2OA==,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

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

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

相关阅读

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

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

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

相关 JS实现输入框类似百度搜索的智能提示功能，实现提示列表向上弹出

原文链接，[请点击我][Link 1] 原文的博主写的非常详细，而且对js和css还做了自己的调整，实现的效果也非常好。给的例子也非常全，包括静态的提示和通过ajax方式的提

- 日理万妓/ 2022年05月29日 00:18/ 0 赞/ 312 阅读

相关 jQuery实现百度搜索框

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

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

相关百度搜索框

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

旧城等待，/ 2022年05月06日 03:58/ 0 赞/ 369 阅读

相关 js模拟百度搜索

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

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

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

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

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

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

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

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

相关 js实现模拟百度搜索

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

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

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

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

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

相关百度搜索框提示功能简单实现

效果图如下: ![20151201172134130][] 在搜索框中输入的时候会有百度的智能提示。代码也很简单，整个html只有24行，关键的代码不超过10行。

缺乏、安全感/ 2021年06月10日 20:41/ 0 赞/ 684 阅读