JavaScript达成百度搜索原理及代码介绍

发布时间：2022-04-20 09:32:10 所属栏目：语言来源：互联网

导读：搜索功能可以帮助我们更快的获取到我们想要的信息，那么我们做网站时如何实现一个搜索功能呢？这篇文章就以JavaScript实现百度搜索为例，介绍一下实现原理以及具体代码。实现原理向输入框动态输入时关键词，将当前关键词作为问号参数后面的值，因为要跨域

搜索功能可以帮助我们更快的获取到我们想要的信息，那么我们做网站时如何实现一个搜索功能呢？这篇文章就以JavaScript实现百度搜索为例，介绍一下实现原理以及具体代码。

       实现原理
       向输入框动态输入时关键词，将当前关键词作为问号参数后面的值，因为要跨域使用百度的接口，所以通过 JSONP 跨域创建 Ajax 请求。回调函数处理返回值。

尝试研究了一下百度的接口，发现原生的 XHR 接口参数有点复杂(百度应该是考虑了很多情况)。

       找了一个 2345 导航，在输入框随便输入一个字母 s，打开 Network,发现它也是向百度的一个地址发送了请求，其中问号后面的‘&wd=s'发送的就是此关键词，'&cb='应该就是回调处理函数，并且它的 Type 也是 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%,发现如果将 height 设置成具体值就可以实现居中。怀疑是设置了%高度无效，查了一下，高度百分比是相对于父盒子的，也就是 body。默认 html 和 body 是没有设置 height 的。另外，在布局中对于没有设置宽高的块状盒子，宽度默认是 100%的，高度是由里面的内容自然撑开的。

       2.先获取常用的 DOM 节点，避免后续频繁查询操作 DOM。

       3. 除了点击事件，键盘事件�C回车键以及上下键都是进行事件委托进行注册的。

       最终能够实现键盘上下键鼠标选择，点击“搜索一下”或回车键实现跳转搜索。

（编辑：云计算网_泰州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

Tomcat下载和安置	装饰器模式装饰设计模
无用单元采集垃圾回收	Java访问对象的属性和