jsonp跨域，原生js和ajax实现百度，360，必应等浏览器搜索框的智能补全提示技术，带搜索功能的搜索框
2020-06-06 04:54
441 查看
相信许多刚学前端的的同学，都曾对浏览器搜索框自动提示提示的功能挺好奇的，接下让我们一起揭露他的神秘面纱吧！
相信学过javascript的同学都引用过外部的JavaScript吧！，其实跨域就是动态的创建script标签，将script标签url的内容渲染到指定的页面。下面我们将以百度搜索框为例，进行讲解。
第一种方法，jsonp原理，动态生成script标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.search_box{
width: 500px;
position: absolute;
top: 180px;
left: 460px;
}
.search_box #text{
width: 450px;
height: 48px;
box-sizing: border-box;
transition: width 1.5s;
margin: 0 auto;
padding: auto;
position: relative;
border: 1px solid rgba(0,0,0,0.6);
background-color:rgba(0,0,0,0.6);
border-radius: 20px;
text-align: center;
color: rgba(256,256,256,0.9);
}
.search_box #search{
width: 450px;
margin: 0;
padding: 0;
list-style: none;
display: none;
position: absolute;
top: 60px;
left: 0;
}
.search_box #search li{
line-height: 25px;
color: #fff;
background-color:rgba(0,0,0,0.3);
cursor: pointer;
}
.search_box #search :first-child{
border-top-left-radius: 25px;
border-top-right-radius: 25px;
}
.search_box #search :last-child{
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
}
.search_box #search li:hover{
background:rgba(0,0,0,1);
}
.search_box .li1{
text-indent: 4px;
}
</style>
</head>
<body>
<div class="search_box">
<input type="text" name="text" id="text" value="" placeholder="search"/>
<ul id="search">
</ul>
</div>
<script>
var ose,lis,li_list;
var otext = document.getElementById("text");
ose = document.querySelector("#search");
lis = document.getElementsByClassName("li1"); // 获取所有的li
otext.onkeyup = function(){ // 当在input框中键盘弹起发生事件
if(!otext.value) { // 判断是否输入了内容,如果无内容，提示框则不展开，也不进行下面的指令
ose.style.display = 'none'
return
}
ose.style.display = 'block'
var osc = document.createElement("script"); // 创建一个script标签
osc.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+otext.value+"&cb=liu";
// 将srcipt的src设置为百度提供的Api,然后动态的将文本框内容拼接到url,自定义回调函数处理返回的数据
// 将创建好的script标签引入到body中
document.body.appendChild(osc);
// 监听input框的回车事件，进行页面的跳转
if(event.keyCode==13){
// 进行百度搜索跳转
window.location.href = "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd="+otext.value
}
}
// 回调函数处理返回的数据
function liu(json){
ose.innerHTML = '' // 清空上一次数据
// json长度的初始值
// console.log(json.s); 打印json数据中的所有数据
for(var i=0;i<10;i++){// 自己定义循环的次数，获取几条数据，这里以10条为例
var getli = document.createElement('li') // 动态创建p标签
getli.innerHTML = json.s[i]; // 将返回的数据赋值给p标签
ose.appendChild(getli) // 将动态生成的p标签添加到提示框中
}
li_list = document.getElementById("search").getElementsByTagName("li")
for(i=0;i<10;i++){
li_list[i].onclick=function(){ // 为每一个li注册点击事件
otext.value = this.innerHTML;
window.location.href = "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd="+otext.value
}
}
}
/*单击body中的任意地方隐藏li*/
document.body.onclick = function(){
ose.style.display = "none";
}
</script>
</body>
</html>
效果如下：
第二种方法，原生js封装请求代码如下：
if (window.XMLHttpRequest) {
//主流浏览器提供了XMLHttpRequest对象
return new XMLHttpRequest();
} else if (window.ActiveXObject) {
//低版本的IE浏览器没有提供XMLHttpRequest对象
//所以必须使用IE浏览器的特定实现ActiveXObject
return new ActiveXObject("Microsoft.XMLHttpRequest");
}
};
var xhr = getXmlHttpRequest();
xhr.onreadystatechange = function() {
console.log(xhr.readyState);
if (xhr.readyState === 4 && xhr.status === 200) {
//获取成功后执行操作
//数据在xhr.responseText
var resJson = JSON.parse(xhr.responseText)
cb(resJson);
}
};
xhr.open("get", uri, true);
第三种ajax方法：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
</head>
<body>
请输入：<input list="languageList" id="value" type="text" />
<ul class="list">
</ul>
<script>
/*设置监听事件，向输入框中输入内容，当键盘按键弹起的时候，将输入的内容作为参数传入到函数info中*/
$("#value").bind("keyup",function(event){
/*当键盘按下上下键的时候，不进行监听，否则会与keyup事件起冲突*/
if(event.keyCode == 38 || event.keyCode == 40){
return false;
}
var value = $("#value").val();
info(value);
})
/*将ajax封装到函数中*/
function info(value){
/*百度搜索框智能提示的接口*/
var url = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su";
/*需要传入的参数，cb是callback的缩写*/
var data = {
wd : value,
cb : "liu"
}
/*因为涉及跨域，这里使用jsonp*/
$.ajax({
url : url,
data : data,
type : "GET",
dataType : "jsonp",
jsonpCallback : "liu",
success : function (result){
var a = result.s;
a.forEach(function(data){
var lis=$("<li><li>");
lis.html(data)
$(".list").append( lis)
})
},
error : function(el){
console.log(el);
}
})
}
</script>
</body>
</html>
分享一些我以前抓过的api接口
必应的请求URL为：http://api.bing.com/qsonhs.aspx?type=cb&cb=callback&q=" + 内容
360的请求URL为：https://sug.so.360.cn/suggest
百度音乐URL：http://tingapi.ting.baidu.com/v1/restserver/ting
搜索要传入 method:“baidu.ting.search.catalogSug”,
其他的yaochua
酷狗音乐：https://wwwapi.kugou.com/yy/index.php
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 百度搜狗等搜索引擎智能提示（JSONP跨域实现自动补全搜索建议）
- 百度搜狗等搜索引擎智能提示（JSONP跨域实现自动补全搜索建议）
- 利用jsonp跨域调用百度js实现搜索框智能提示
- 使用jsonp跨域调用百度js实现搜索框智能提示，并实现鼠标和键盘对弹出框里候选词的操作【附源码和在线测试地址】
- 百度搜狗等搜索引擎智能提示（JSONP跨域实现自动补全搜索建议）
- 使用jsonp跨域调用百度js实现搜索框智能提示，并实现鼠标和键盘对弹出框里候选词的操作【附源码】
- 使用jsonp跨域调用百度js实现搜索框智能提示（转）
- 百度等搜索引擎智能提示（JSONP跨域实现自动补全搜索建议）
- 使用jsonp跨域调用百度js实现搜索框智能提示，并实现鼠标和键盘对弹出框里候选词的操作【附源码和在线测试地址】
- 使用jsonp跨域调用百度js实现搜索框智能提示，并实现鼠标和键盘对弹出框里候选词的操作【附源码和在线测试地址】
- Js和Json技术实现百度搜索提示功能
- 各大搜索引擎智能提示API（JSONP跨域实现自动补全搜索建议）
- 各大搜索引擎智能提示API （JSONP跨域实现自动补全搜索建议）
- Servlet+Ajax实现智能搜索框智能提示功能
- 仿google、百度搜索框输入信息智能提示的实现 兼容主流浏览器
- AJAX实现类似百度的搜索提示，自动补全和键盘、鼠标操作
- 仿google、百度搜索框输入信息智能提示的实现 兼容主流浏览器
- JS实现搜索关键词的智能提示功能
- 各大搜索引擎智能提示API(jsonp实现跨域自动补全建议)
- 仿google、百度搜索框输入信息智能提示的实现 兼容主流浏览器