html怎么创百度搜索框,JS实现百度搜索框
html document是什么本⽂实例为⼤家分享了JS实现百度搜索框的具体代码，供⼤家参考，具体内容如下
实现原理
向输⼊框动态输⼊时关键词，将当前关键词作为问号参数后⾯的值，因为要跨域使⽤百度的接⼝，所以通过 JSONP 跨域创建 Ajax 请求。回调函数处理返回值。
尝试研究了⼀下百度的接⼝，发现原⽣的 XHR 接⼝参数有点复杂(百度应该是考虑了很多情况)。
了⼀个 2345 导航，在输⼊框随便输⼊⼀个字母 s，打开 Network，发现它也是向百度的⼀个地址发送了请求，其中问号后⾯
的‘&wd=s'发送的就是此关键词，'&cb='应该就是回调处理函数，并且它的 Type 也是 script，2345 导航应该也是通过 JSONP 向百度获取数据的。
var script = ateElement("script");
script.src =
"www.baidu/su?&wd=" +
encodeURI(im()) +
"&p=3&cb=handleSuggestion";
document.body.appendChild(script);
点开那条请求，果然在⾥⾯看到了返回的数据。返回的结果是以⼀个对象的形式返回的。q 对应着检索关键词，s 对应着返回的结果(数组形式)
后续只需要动态创建 li 标签，设置⾥⾯的内容，以及注意其他细节问题。
1.使⽤ flex 布局实现搜索框的⽔平垂直居中。
坑 设置完 flex 属性之后发现并没有⽔平垂直居中，当时设置了⽗盒⼦ height:100%，发现如果将 height 设置成具体值就可以实现居中。怀疑是设置了%⾼度⽆效，查了⼀下，⾼度百分⽐是相对于⽗盒⼦的，也就是 body。默认 html 和 body 是没有设置 height 的。另外，在布局中对于没有设置宽⾼的块状盒⼦，宽度默认是 100%的，⾼度是由⾥⾯的内容⾃然撑开的。
2.先获取常⽤的 DOM 节点，避免后续频繁查询操作 DOM。
3.为了避免在输⼊过程中频繁发送请求(如果打字速度快)，对请求函数做了函数节流，调了⼀下间隔 130ms 差不多正好，时间再长就会有卡顿的感觉。使⽤了 ES6 中的箭头函数避免了 setTimeout 中 this 指向的问题。
每⼀次执⾏时⾸先要清除建议框⾥的内容，不然上⼀次的结果还会存在建议框⾥！截取了结果中的前五个(如果把所有结果都展⽰出来感觉有点丑…百度官⽅是展⽰前四个搜索建议)
结果处理完毕后，执⾏⾃执⾏匿名函数，删除创建的 script 标签;
5.由于 li 是动态创建的，点击 li 标签或者点击"搜索⼀下"跳转百度进⾏搜索时，利⽤事件冒泡原理，进⾏事件委托。这⾥没有考虑兼容性问题：
e = e || window.event;
target = e.target || e.srcElement;
6.除了点击事件，键盘事件–回车键以及上下键都是进⾏事件委托进⾏注册的。
最终能够实现键盘上下键⿏标选择，点击“搜索⼀下”或回车键实现跳转搜索。
代码：
search you want
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;
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
}
var suggestContainer = ElementsByClassName("suggest")[0]; var searchInput = ElementsByClassName("search-input-text")[0]; var bgDiv = ElementsByClassName("bgDiv")[0];
var searchResult = ElementById("search-result");
// 清除建议框内容
function clearContent() {
var size = searchResult.childNodes.length;
for (var i = size - 1; i >= 0; i--) {
}
};
var timer = null;
// 注册输⼊框键盘抬起事件
suggestContainer.style.display = "block";
// 如果输⼊框内容为空 清除内容且⽆需跨域请求
if (this.value.length === 0) {
clearContent();
return;
clearTimeout(this.timer);
}
if (e.keyCode !== 40 && e.keyCode !== 38) {
// 函数节流优化
this.timer = setTimeout(() => {
// 创建script标签JSONP跨域
var script = ateElement("script");
script.src = "www.baidu/su?&wd=" + encodeURI(im()) + "&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 = ateElement("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++) {
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论