众所周知，跨域搜索依托于“ 请求数据 ”和“ 回调 ”。
本节所用为网址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，步入正题：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度跨域搜索-搜索关键字讲解</title>
<style>
*{
margin: 0;
padding: 0;
}
input{
display: block;
width: 500px;
height: 30px;
margin: 150px auto 0;
}
ul{
list-style-type: none;
width: 500px;
margin: 0 auto;
border: 1px solid #ccc;
}
li{
font-size: 14px;
line-height: 30px;
text-indent: 10px;
cursor: pointer;
}
li:hover{
background: #e9e9e9;
cursor: pointer;
}
</style>
</head>
<body>
<label>
<input type="text" onkeyup="query(this)" />
</label>
<ul>
<!--<li></li>--> <!-- 这里为啥不用li，因为我们这里需要的不是固定的li列表 -->
</ul>
</body>
</html>
HTML+css很简单，也不是重点，这里就不再多说，唯一需要注意的一点：我们没有用li标签！
为什么？ 列表需要js动态渲染！
<script>
//定义一个函数query，搜索关键字相关的补全操作
function query(_this) {
//console.log(this); //这里的this是谁？执行这个函数的人——这里会打印window，因为我们这个函数时定义在全局里面的
//console.log(_this); //参数，接上HTML中的query(this)函数传参调用，所以我们重新以参数的形式传入this（加了下划线），这样以后，指向的就是input了
var key=_this.value; //获取文本框的内容
var script=document.createElement('script'); //这一步的用意：我们本应将网址链接以scrip标签的形式引入
script.src='https://www.baidu.com/sugrec?prod=pc&wd='+key+'&cb=mxc';
document.body.appendChild(script);
//接口——即 URL地址
}
function mxc(data) {
document.getElementsByTagName('ul')[0].innerHTML=''; //清空原始内容
//如何找？ console.log(data.g)——打开控制台，发现data的g属性被用于保存jsonp数据
data.g.forEach(function (el) { //el代表所访问到的元素
var oli=document.createElement('li');
oli.innerHTML=el.q; //g数组中的q属性代表了每一个li
document.getElementsByTagName('ul')[0].appendChild(oli);
});//遍历数组
}
</script>
第8行：即为百度搜索引擎接口，我们将key保存用户输入的内容，然后在后面的回调函数里调用！
（ 注意看第二个函数的函数名和第8行中最后的名称 ）
我们在回调函数中的data，就是key值，也就是在输入框里输入的内容！
此时打开14行和控制台（直接在控制台log也行），会发现有一个jsonp格式的data，将其打开，其中的g（数组形式）内容就是所谓的“关联内容”（ul > li）
这里我只是实现了简单的关键词检索，还有跳转功能，就靠大家自己琢磨了，，，
扩展
常用的表单文字跳转（HTML版）：
<form class="xxx" action="https://cn.bing.com/search">
</form>
1134
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
