百度搜索框案例，jsonp实现搜索功能

最新推荐文章于 2022-05-25 08:47:23 发布

boboj1

最新推荐文章于 2022-05-25 08:47:23 发布

阅读量474

点赞数 3

分类专栏： AJAX

本文链接：https://blog.csdn.net/Wind_AN/article/details/117385924

版权

百度搜索 jsonp 跨域 API接口动态搜索建议

关键词由CSDN通过智能技术生成

AJAX 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在这里插入图片描述
想要实现该功能得先有一个接口–>百度搜索框数据接口

API地址后面进行拼接

wd=后面跟的就是要搜索的关键词，因此我们只需要将input框中的值传到wd=后面，然后通过jsonp跨域实现搜索功能
jsonp跨域详解
附上全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度搜索框</title>
    <style>
        *{ margin: 0; padding: 0; }
        ul,li{ list-style: none; width: 300px; }
        a{ text-decoration: none; }
        #q{ width: 300px; box-sizing: border-box; }
        #ul1{ border: 1px solid #ccc; }
        #ul1 li{ margin-top: 10px; }
        #ul1 li:hover{ background-color: aqua; }
    </style>
    <script>
        function show(data){
            var arr = data.s;
            var ul1 = document.getElementById("ul1");
            ul1.innerHTML = "";
            ul1.style.display = "block";

            for(var i = 0;i < arr.length;i ++){
                var newLi = document.createElement("li");
                var A = document.createElement("a");
                A.innerHTML = arr[i];
                A.href = "http://www.baidu.com/s?wd=" + arr[i];
                A.target = '_blank';
                newLi.appendChild(A);
                ul1.appendChild(newLi);
            }
        }
    </script>
    <script>
        window.onload = function() {
            var q = document.getElementById("q");
            var ul1 = document.getElementById("ul1");
            
			//给搜索框一个事件，键盘每按下抬起后执行一次函数，从而使得下拉框中的列表
			//一直也在变化
            q.onkeyup = function() {
                var value = this.value;
                
                if(!value) {
                    ul1.style.display = "none";
                }else{
                    var oldscript = document.getElementById("script");
                    var script = document.createElement("script");
                    script.id = "script";
                    script.src = `https://suggestion.baidu.com/su?wd=${this.value}&cb=show`;
                    oldscript.parentNode.replaceChild(script,oldscript);
                }
            }
        }
    </script>
</head>
<body>
    <div id="div1">
        <input type="text" id="q">
        <ul id="ul1">
        </ul>
    </div>
    <script id="script"></script>
</html>