调用百度“搜索建议（BaiduSuggestion）”的 API

- 那么百度返回：window.bdsug.sug({q:"wq",p:true,s:["wqvga","wqi","wqsg_umd","wqynyl","wqi下载","wqrc","wqnmlgb","wqvga分辨率","吴奇隆","吾栖之肤"]});window.bdsug.sug({q:"wq",p:true,s:["wqvga","wqi","wqsg_umd","wqynyl","

叶落无痕123

1040人浏览 · 2022-08-17 17:29:02

叶落无痕123 · 2022-08-17 17:29:02 发布

原理

当前发送一个 Get 请求：http://suggestion.baidu.com/su?wd=wq&p=3&cb=window.bdsug.sug&t=1324271669786

注意 wd：搜索关键字

cb：callback 回调函数

那么百度将返回一个如下的 json 数据：

window.bdsug.sug({q:"wq",p:true,s:["wqvga","wqi","wqsg_umd","wqynyl","wqi下载","wqrc","wqnmlgb","wqvga分辨率","吴奇隆","吾栖之肤"]});

其实最复杂的是如何在客户端展示这些数据，需要用到 css 和 js。

正好园子里有朋友做了，感谢！

怎么样把百度搜索引入自己的网站JS实现(附源代码) - 苏飞 - 博客园

主要代码：

index.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>调用百度的“搜索建议”</title>
    <link href="js/StyleSheet.css" rel="stylesheet" type="text/css" />

    <script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>

    <script src="js/JScript2.js" type="text/javascript"></script>

</head>
<body>
    <input style="width: 500px;" url="true" id="Text1" type="text" />
    <br />
    <input style="width: 500px;" id="Text2" type="text" />
    
    <div style="display: none; position: absolute;" id="allSitesBoxHdl" class="classlist"
        οnmοuseοver="this.style.display='block'" οnmοuseοut="this.style.display='none'">
        <ul id="allSitesBoxContent">
        </ul>
    </div>

    <script type="text/javascript">
            Init();
    </script>
    
    <!-- 原理：http://suggestion.baidu.com/su?wd=wq&p=3&cb=window.bdsug.sug&t=1324271669786 -->
    <!-- 那么百度返回：window.bdsug.sug({q:"wq",p:true,s:["wqvga","wqi","wqsg_umd","wqynyl","wqi下载","wqrc","wqnmlgb","wqvga分辨率","吴奇隆","吾栖之肤"]}); -->
</body>
</html>

StyleSheet.css

#allSitesBoxHdl.classlist
{
    position: absolute;
    background-color: #F5FBFF;
    width: 256px;
    border: 1px solid #C9E4F4;
    top: 28px;
    left: 0;
    text-align: left;
    font-size: 14px;
    line-height: 30px;
    padding: 1px;
}
#allSitesBoxHdl.classlist li
{
    display: inline;
}
#allSitesBoxHdl.classlist li.lis a
{
    text-decoration: none;
    height: 30px;
    width: 210px;
    float: left;
    padding-left: 8px;
    color: #666;
}
#allSitesBoxHdl.classlist li.lis a:hover
{
    color: #016493;
    background-color: #edf6fb;
}
#allSitesBoxHdl.classlist li.lis a:active
{
    color: #016493;
    background-color: #edf6fb;
}
#allSitesBoxHdl.classlist li.lis input
{
    cursor: pointer;
    color: #FF6600;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    height: 22px;
    margin: 4px;
    line-height: 22px;
    float: right;
    background: #fff;
}
.wena
{
    color: #666;
    font-size: 12px;
    height: 30px;
    line-height: 30px;
    width: 250px;
    float: left;
}

JScript2.js

//得到控件ID
function getid(id) {
    return (typeof id == 'string') ? document.getElementById(id) : id
};
function getOffsetTop(el, p) {
    var _t = el.offsetTop;
    while (el = el.offsetParent) {
        if (el == p) break;
        _t += el.offsetTop
    }
    return _t
};
function getOffsetLeft(el, p) {
    var _l = el.offsetLeft;
    while (el = el.offsetParent) {
        if (el == p) break;
        _l += el.offsetLeft
    }
    return _l
};

var currentInput = null;
//修改属性显示列表
function BoxShow(e) {
    var input = e;
    if (!input.id) {
        input = e.target ? e.target : e.srcElement;
    }
    currentInput = input;
    FillUrls();
    var box = getid("allSitesBoxHdl");
    if (box.style.display == 'block' && currentInput.id == input.id) {
        return;
    }
    box.style.left = (getOffsetLeft(input)) + 'px';
    box.style.top = (getOffsetTop(input) + (input.offsetHeight - 1)) + 'px';
    box.style.width = (input.offsetWidth - 4) + 'px';
    box.style.display = 'block';
}
//显示列表
function BoxShowUrls(e) {
    var input = e;
    if (!input.id) {
        input = e.target ? e.target : e.srcElement;
    }
        BoxShow(e);
}
//给Input设置值
function InputSetValue(val) {
    var obj = currentInput;
    obj.value = val;
    if (obj.getAttribute('url') == 'true') {
        var tags = document.getElementsByTagName('input');
        for (var i = 0; i < tags.length; i++) {
            if (tags[i].getAttribute('url') == 'true' && tags[i] != obj) {
                tags[i].value = val;
            }
        }
    }
    BoxHide();
}

function BoxHide() {
    if (getid("allSitesBoxHdl")) {
        getid("allSitesBoxHdl").style.display = 'none';
    }
}
//加载列表
function FillUrls() {
    var strdomin = $.trim($("#Text1").val());
    var qsData = { 'wd': strdomin, 'p': '3', 'cb': 'ShowDiv', 't': '1324113456725' };
    $.ajax({
        async: false,
        url: "http://suggestion.baidu.com/su",
        type: "GET",
        dataType: 'jsonp',
        jsonp: 'jsoncallback',
        data: qsData,
        timeout: 5000,
        success: function (json) {
        },
        error: function (xhr) {
            alert(xhr);
        }
    });
}
function ShowDiv(strurls) {
    var urls = strurls["s"];
    var html = "";
    if (urls) {
        var urllist = urls;
        var forlength = 0;
        var stringcookie;
        for (var i = urllist.length - 1; i >= 0; i--) {
            var textval = urllist[i];
            if ($.trim(textval) != "" && $.trim(textval) != "undefined") {
                html += "<li class=\"lis\"><a href=\"javascript:InputSetValue('" + textval + "');\">" + textval + "</a></li><br/>";
            }
        }
    } else {
        html = "<li style='font-size: 12px;' >&nbsp;&nbsp;没有记录</li>";
    }
    if ($.trim(html) == "") {
        html = "<li style='font-size: 12px;' >&nbsp;&nbsp;没有记录</li>";
    }
    getid("allSitesBoxContent").innerHTML = html;
}
//关闭输入法
function closeIME(e) {
    var obj = e.target ? e.target : e.srcElement;
    obj.style.imeMode = 'disabled';
}

function OnPaste(e) {
    var obj = e.target ? e.target : e.srcElement;
    setTimeout("MoveHttp('" + obj.id + "')", 100);
}
//修正URL
function MoveHttp(id) {
    var val = getid(id).value;
    val = val.replace("http://", "");
    if (val[val.length - 1] == '/') {
        val = val.substring(0, val.length - 1);
    }
    getid(id).value = val;
}
function OnKeyup(e) {
    var obj = e.target ? e.target : e.srcElement;
    setTimeout("addInput('" + obj.id + "')", 200);
}
//赋值
function addInput(id) {
    var obj = getid(id);
    //如果是一个没有True的input不执行
    if (obj.getAttribute('url') == 'true') {
        if (obj.value.indexOf('。') > 0) {
            obj.value = obj.value.replace('。', '.');
        }
        var tags = document.getElementsByTagName('input');
        for (var i = 0; i < tags.length; i++) {
            if (tags[i].getAttribute('url') == 'true' && tags[i] != obj) {
                tags[i].value = obj.value;
            }
        }
    }
    FillUrls();
}
//注册对象的事件
function Init() {
    $("#allSitesBoxHdl")[0].style.display = "none"; 
    $(":text").each(function () {
        if ($(this)[0].getAttribute('url') == 'true') {//给所有的url=true属性的Text加效果
            $(this).bind("keyup", OnKeyup); //按键时
            $(this).bind("mousedown", BoxShowUrls); //鼠标安下时
            $(this).bind("mouseout", BoxHide); //鼠标离开时
            $(this).bind("paste", OnPaste); //处理http;//
            $(this)[0].setAttribute("autocomplete", "off");
        }
    });
}

华为开发者联盟HarmonyOS专区

鸿蒙生态一站式服务平台。

更多推荐

【grafana】使用教程

华为开发者联盟HarmonyOS专区

【PX4-AutoPilot教程-开发环境】使用VMware虚拟机安装Ubuntu系统并搭建PX4开发环境（ROS+mavros+jMAVSim+gazebo+QGC+QT）

学习PX4开发需要先配置好开发环境，对于新手推荐使用VMware虚拟机搭建Ubuntu系统，并下载PX4源码，配置好编译环境和工具链（ROS操作系统+mavros通信包+jMAVSim仿真+gazebo仿真+QGC地面站+QT开发平台）。教程中使用的是Ubuntu18.04系统（官方推荐使用版本），PX4固件版本为v1.13.0，飞控板为pixhawk2.4.8版本。