本文介绍如何利用 JavaScript 和 JSONP 技术实现百度搜索框的自动补全功能。通过动态创建 script 标签发起跨域请求，结合函数节流优化高频输入性能，并运用事件委托处理键盘与鼠标交互，最终实现流畅的搜索建议展示与跳转功能。
本文分享了使用 JavaScript 实现百度搜索框的具体代码示例，供读者参考学习。
实现原理
核心思路是监听输入框的动态输入，将用户输入的关键词作为查询参数附加在 URL 中。由于需要跨域调用百度的接口，因此采用 JSONP 方式构建异步请求。最后通过指定的回调函数处理服务器返回的数据。
在研究百度接口时发现，原生 XHR 接口的参数配置较为复杂，百度可能考虑了多种兼容场景。
通过观察 2345 导航站的实现，在输入框输入字母 's' 并查看 Network 面板，发现其同样向百度地址发送请求。请求参数中包含 '&wd=s'（关键词）和 '&cb='（回调函数名），且请求类型为 script，这表明 2345 导航也是通过 JSONP 机制获取百度数据。
var script = document.createElement("script");
script.src =
"https://www.baidu.com/su?&wd=" +
encodeURI(this.value.trim()) +
"&p=3&cb=handleSuggestion";
document.body.appendChild(script);查看具体请求响应，确认返回数据为对象格式，其中 'q' 字段对应检索关键词，'s' 字段对应返回的结果数组。
后续逻辑主要涉及动态创建 li 标签，填充内容，并处理其他交互细节。
1. 采用 flex 布局实现搜索框的水平与垂直居中。
注意事项：设置 flex 属性后并未立即生效，排查发现父盒子 height 设为 100% 时，若未显式设置具体数值则无效。经查阅，高度百分比是相对于父元素（即 body）的，而默认 html 和 body 未设置 height。此外，未设置宽高的块级元素宽度默认为 100%，高度由内容撑开。
2. 预先获取常用的 DOM 节点，避免在后续操作中频繁查询 DOM，提升性能。
3. 为防止用户快速输入时频繁发送请求，对请求函数实施了节流处理，设置间隔为 130ms，此值在响应速度与流畅度之间取得平衡。同时使用 ES6 箭头函数解决了 setTimeout 中 this 指向的问题。
4. 在回调函数中的处理逻辑：
- 每次执行时需先清空建议框内容，防止残留上一次的结果。仅截取结果数组中的前五个进行展示（百度官方展示前四个，此处展示五个认为视觉效果更佳）。
- 数据处理完成后，执行自执行匿名函数以删除动态创建的 script 标签，保持 DOM 整洁。
5. 由于 li 标签是动态生成的，点击 li 或“搜索一下”按钮跳转时，利用事件冒泡原理进行事件委托。此处未做浏览器兼容性处理。
e = e || window.event;
target = e.target || e.srcElement;6. 除点击事件外，回车键及上下方向键的键盘事件也通过事件委托进行注册。
最终效果支持键盘上下键选择、鼠标点击选择，以及点击“搜索一下”或回车键实现跳转搜索。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 兼容性视图 -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta content="更方便快捷搜索，从而达到事半功倍的效果" name="description">
<title>search you want</title>
<style>
html {
height: 100%;
}
body {
background: #f0f3ef;
height: 100%;
}
.container {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.bgDiv {
box-sizing: border-box;
width: 595px;
height: 55px;
position: relative;
/* position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%); */
}
.search-input-text {
border: 1px solid #b6b6b6;
width: 495px;
background: #fff;
height: 33px;
line-height: 33px;
font-size: 18px;
padding: 3px 0 0 7px;
}
.search-input-button {
width: 90px;
height: 38px;
color: #fff;
font-size: 16px;
letter-spacing: 3px;
background: #3385ff;
border: .5px solid #2d78f4;
margin-left: -5px;
vertical-align: top;
opacity: .9;
}
.search-input-button:hover {
opacity: 1;
box-shadow: 0 1px 1px #333;
cursor: pointer;
}
.suggest {
width: 502px;
position: absolute;
top: 38px;
border: 1px solid #999;
background: #fff;
display: none;
}
.suggest ul {
list-style: none;
margin: 0;
padding: 0;
}
.suggest ul li {
padding: 3px;
font-size: 17px;
line-height: 25px;
cursor: pointer;
}
.suggest ul li:hover {
background-color: #e5e5e5
}
</style>
</head>
<body>
<div class="container">
<div class="bgDiv">
<input type="text" class="search-input-text" value="" autofocus placeholder="关键词">
<input type="button" value="搜索一下" class="search-input-button" id="btn">
<div class="suggest">
<ul id="search-result">
</ul>
</div>
</div>
</div>
<script>
var suggestContainer = document.getElementsByClassName("suggest")[0];
var searchInput = document.getElementsByClassName("search-input-text")[0];
var bgDiv = document.getElementsByClassName("bgDiv")[0];
var searchResult = document.getElementById("search-result");
// 清除建议框内容
function clearContent() {
var size = searchResult.childNodes.length;
for (var i = size - 1; i >= 0; i--) {
searchResult.removeChild(searchResult.childNodes[i]);
}
};
var timer = null;
// 注册输入框键盘抬起事件
searchInput.onkeyup = function (e) {
suggestContainer.style.display = "block";
// 如果输入框内容为空 清除内容且无需跨域请求
if (this.value.length === 0) {
clearContent();
return;
}
if (this.timer) {
clearTimeout(this.timer);
}
if (e.keyCode !== 40 && e.keyCode !== 38) {
// 函数节流优化
this.timer = setTimeout(() => {
// 创建script标签JSONP跨域
var script = document.createElement("script");
script.src = "https://www.baidu.com/su?&wd=" + encodeURI(this.value.trim()) +
"&p=3&cb=handleSuggestion";
document.body.appendChild(script);
}, 130)
}
};
// 回调函数处理返回值
function handleSuggestion(res) {
// 清空之前的数据！！
clearContent();
var result = res.s;
// 截取前五个搜索建议项
if (result.length > 4) {
result = result.slice(0, 5)
}
for (let i = 0; i < result.length; i++) {
// 动态创建li标签
var liObj = document.createElement("li");
liObj.innerHTML = result[i];
searchResult.appendChild(liObj);
}
// 自执行匿名函数--删除用于跨域的script标签
(function () {
var s = document.querySelectorAll('script');
for (var i = 1, len = s.length; i < len; i++) {
document.body.removeChild(s[i]);
}
})()
}
function jumpPage() {
window.open(`https://www.baidu.com/s?word=${encodeURI(searchInput.value)}`);
}
// 事件委托 点击li标签或者点击搜索按钮跳转到百度搜索页面
bgDiv.addEventListener("click", function (e) {
if (e.target.nodeName.toLowerCase() === 'li') {
var keywords = e.target.innerText;
searchInput.value = keywords;
jumpPage();
} else if (e.target.id === 'btn') {
jumpPage();
}
}, false);
var i = 0;
var flag = 1;
// 事件委托 监听键盘事件
bgDiv.addEventListener("keydown", function (e) {
var size = searchResult.childNodes.length;
if (e.keyCode === 13) {
jumpPage();
};
// 键盘向下事件
if (e.keyCode === 40) {
if (flag === 0) {
i = i + 2;
}
flag = 1;
e.preventDefault();
if (i >= size) {
i = 0;
}
if (i < size) {
searchInput.value = searchResult.childNodes[i++].innerText;
}
};
// 键盘向上事件
if (e.keyCode === 38) {
if (flag === 1) {
i = i - 2;
}
flag = 0;
e.preventDefault();
if (i < 0) {
i = size - 1;
}
if (i > -1) {
searchInput.value = searchResult.childNodes[i--].innerText;
}
};
}, false);
// 点击页面任何其他地方 搜索结果框消失
document.onclick = () => clearContent()
</script>
</body>
</html>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。