想要实现该功能得先有一个接口–>百度搜索框数据接口
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>