<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 500px;
margin: 100px auto;
}
input {
width: 100%;
height: 40px;
line-height: 40px;
}
ul {
list-style: none;
display: none;
}
li {
line-height: 40px;
}
</style>
</head>
<body>
<div class="box">
<input type="text" id="inp" />
<ul></ul>
</div>
<script>
var inp = document.querySelector("#inp");
var ul = document.querySelector("ul");
inp.onfocus = function () {
ul.style.display = "block";
};
inp.onblur = function () {
ul.style.display = "none";
};
inp.oninput = function () {
var key = this.value;
first = function (data) {
console.log(data.g);
var str = "";
if (data.g) {
data.g.forEach(function (item) {
str += `<li>${item.q}</li>`;
});
} else {
console.log("此时input搜索框没有输入值");
}
ul.innerHTML = str;
};
var script = document.createElement("script");
script.src = `https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=33513,33258,33273,31660,33594,33163,26350,22160&wd=${key}&req=2&csor=2&pwd=1&cb=first&_=1614236062364`;
document.body.appendChild(script);
};
</script>
</body>
</html>
百度inp框关键词查询,复制代码,直接用
最新推荐文章于 2024-03-28 19:23:25 发布