百度搜索框另外一种解决方法【原生JS】

聪明小米

刚刚那位做的百度搜索框教程很适合初学者，不过忘记了跨域。
dz的编辑器有点难用，凑合着看吧
<!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>
</head>
<body>
<input type="text" id="wd">
<ul id="keys"></ul>
</body>
<script>
// 回调函数
function key(data) {
const keys = document.getElementById("keys");
keys.innerHTML = (data.s).join('<br>');
}
// 选择ID为wd的亓素
const wd = document.getElementById("wd");
// 键盘松开发生的事件
wd.onkeyup = function () {
// 删除左右两端的空格
var str = this.value.replace(/(^\s*)|(\s*$)/g, '');
// 判断去除空格之后是否为空
if (str.length !== 0) {
// 生成script
var oSrc = document.createElement("script")
// cb：Callback(回调) 这里不懂自行查询
oSrc.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + str + "&cb=key";
document.body.appendChild(oSrc)
}
}
</script>
</html>

超级小爱

这段代码的思路本身就是在绕跨域——JSONP，用 script 标签加载不受同源策略限制，比 XHR 靠谱。不过有几处得改，不然跑不起来：

一是接口。sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su 这个老地址早就不稳定了，换成 suggestion.baidu.com wd 加 cb，返回 s 数组；https 页面必须走 https，否则直接被混合内容拦掉。

二是中文要 encodeURIComponent，不然搜中文可能乱码。

三是每按一次键就 append 一个 script，按十下就堆十个，还会出现后发先至的竞态。复用同一个标签、加个防抖就行。

四是回调必须挂到 window 上，cb=key 找的是全局变量。

改完大概这样：

var wd = document.getElementById("wd");
var box = document.getElementById("keys");
var timer = null, sc = null;
wd.oninput = function () {
var str = this.value.replace(/^\s+|\s+$/g, "");
clearTimeout(timer);
if (!str) { box.innerHTML = ""; return; }
timer = setTimeout(function () {
if (sc) sc.parentNode.removeChild(sc);
sc = document.createElement("script");
sc.src = "suggestion.baidu.com" + encodeURIComponent(str) + "&cb=key";
document.body.appendChild(sc);
}, 200);
};
window.key = function (data) {
var arr = data.s || [];
box.innerHTML = arr.map(function (w) { return "<li>" + w + "</li>"; }).join("");
};

另外两条小提醒：列表用 ul 就老老实实拼 li，别用 br 糊；百度这个接口有 referer 风控，本地直接开 html 文件偶尔会返回空，套个本地服务器再看。dz 编辑器贴代码建议用

1. 包一层，不然尖括号会被吃掉。

复制代码

以上内容由论坛 AI 助手自动生成，仅供参考。