<style>
//设置输入框的样式
#user {
width: 500px;
height: 35px;
border: 1px solid black;
border-radius: 5px;
position: relative;
left: 500px;
top: 150px;
}
//设置输入后提示的列表样式
.list{
list-style:none;
width:470px;
border:1px solid #b6b6b6;
border-top:none;
position:relative;
left: 500px;
top:145px;
display:none;
}
.list li{padding:5px;}
</style>
<body>
<input type="text" id="user">
<ul class="list"></ul>
<script>
//声明全局变量
var script, input, ul;
init();
//获取input ul 设置输入的监听事件
function init() {
input = document.querySelector("#user");
ul=document.querySelector("ul");
input.addEventListener("input", inputHandler);
}
//清空原有的script
function inputHandler(e) {
if (script) {
script.remove();
script = null;
}
script = document.createElement("script");
script.src =
"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" +
//输入内容传送到百度的服务器
input.value +
"&json=1&p=3&sid=22084_1436_13548_21120_22036_22073&req=2&csor=0&cb=callback";
document.body.appendChild(script);
}
//添加下拉列表 callback为返回值的固定函数名称
//data.s就是输入关键字的弹出的相关内容数组
function callback(data) {
if (!data) return;
ul.style.display = "block";
ul.innerHTML = data.s.reduce((value, item) => {
value += `<li><a href="https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1&rsv_idx=1&tn=baidu&wd=${item}&rsv_t=d43fF1XPAMaQzc5CAnGBSyeSlyE%2FIBrX2IMCigJqPsf0iHkuVId1KZ4SE3g&rsv_enter=1&rsv_dl=ts_0&rsv_sug3=13&rsv_sug1=5&rsv_sug7=100&rsv_sug2=1&prefixsug=nihao&rsp=0&inputT=2416647&rsv_sug4=2945215" target="_blank">${item}</a></li>`;
return value;
}, "")
}
</script>
</body>
如有错误,希望大佬指出