（JavaScript）百度/Google 搜索的即时自动补全功能究竟是如何“工作”的？

众所周知，跨域搜索依托于“ 请求数据 ”和“ 回调 ”。
本节所用为网址key检索，如下：

https://www. baidu.com/ sugrec?pre=1 &p=3& ie=utf-8&. json=1 &prod=pc&from=pc_ web&sugsid=2453, 1420, 21100, 29523, 29519, 28519, 29099. 29567, 28835, 29221 &wd=%E5%BO%8F&r eq=2&bs=%E7%99%BE%E5%BA%A6%E7%BD%91%E7%9B%98&pbs=%E7%99%BE%E5%BA%A6%E7%BD%91 %E7%9B%98&csor=7&pwd=f sdf sd&cb= jQuery11020948129769730276_ 1 563796355272&_ =1563796355292

我们以这个网址为例（这是我在百度搜索处输入111控制台返回的结果），略微分析一下 HTTP ：
网址：https://www.baidu.com -> 指向一个服务器地址
（什么是服务器？这个自己百度一下吧，，，）
url：统一资源定位符 路径
uri：统一资源描述符 对于资源名称的描述

众所周知，URL是URI的子集，让我们先了解一下绝对URI的格式：

查询字符串项，又叫“ 传参 ”，多个参数中间用 & 分隔。
又比如：

window.location.host; //返回url 的主机部分
window.location.hostname; //返回服务器地址（域名）
window.location.href; //返回整个url字符串(在浏览器中就是完整的地址栏)
window.location.pathname; //返回path
window.location.protocol; //返回协议名
window.location.port; //url 的端口
window.location.search; //传参

资源？ > 页面 json、xml、css、img …
?wd=1&fs=45&a=5454 > 参数：键值对 key=value
参数作用：需要后端说明
wd：string — 用户所输关键字！
cb：string — 回调函数名称！

yes！你没看错，其实网址cb处好像是一个函数的形式呢~~

先看最终效果：

OK，步入正题：

HTML+css很简单，也不是重点，这里就不再多说，唯一需要注意的一点：我们没有用li标签！
为什么？ 列表需要js动态渲染！

第8行：即为百度搜索引擎接口，我们将key保存用户输入的内容，然后在后面的回调函数里调用！
（ 注意看第二个函数的函数名和第8行中最后的名称 ）

我们在回调函数中的data，就是key值，也就是在输入框里输入的内容！
此时打开14行和控制台（直接在控制台log也行），会发现有一个jsonp格式的data，将其打开，其中的g（数组形式）内容就是所谓的“关联内容”（ul > li）

这里我只是实现了简单的关键词检索，还有跳转功能，就靠大家自己琢磨了，，，

扩展

常用的表单文字跳转（HTML版）：