老师请解答百度联想词的接口问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
input{
width: 500px;
}
ul{
display: none;
width: 500px;
border:1px solid #ccc;
}
</style>
</head>
<body>
<input type="text"></input>
<ul></ul>
<script>
var input = document.getElementsByTagName('input')[0];
var oUl = document.getElementsByTagName('ul')[0];
input.oninput = function (){
var value = this.value;
var oScript = document.createElement('script');
oScript.src = 'https://www.baidu.com/sugrec?wd=' + value + '&cb=doJson';
//这里的地址怎么寻找，我找的这个好像有问题
document.body.appendChild(oScript);
}
function doJson(data){
console.log(data);
var q = data.q;
//在网上查的都是获取有一个S变量，但是根据我自己查的这些数值都是放在变量q里面了，而且整个在一个g的数组里？
var str = '';
if (q.length > 0) {
q.foreach(function(ele,index){
str = '<li>'+ ele + '</li>';});
oUl.innerHTML = str;
oUl.style.display = 'block';
}else{
oUl.style.display = 'none';
}
}
</script>
</body>
</html>
3
收起
正在回答
3回答
同学你好！
在network中：
另，同学是说这种接口是哪里来的对吗？实际开发中是后台提供的，也有的是自己找一些第三方的api使用。
如果帮助到了你，欢迎采纳，祝学习愉快~
卡布琦诺
2019-09-14 19:24:27
同学是想实现如下这种效果么？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<style>
ul,li{
list-style: none;
margin: 0;
padding: 0;
}
li{
line-height:30px;
font-size:16px;
padding:5px 10px;
}
li.current{
background:#CCCCCC;
color:#0000FF;
cursor: pointer;
}
li:hover{
background:#CCCCCC;
color:#0000FF;
cursor: pointer;
}
</style>
<input type="text" id="txt" />
<input type="button" id="btn" value="百度一下" />
<div class="box" id="box">
<ul>
</ul>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
//百度的搜索接口,整理以后的接口https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=&cb=
//这部分是根据输入框中的事件来做的事情
//使用keyup来判断是否要发送请求，如果使用keydown会发现输入一个词后要再按一下键盘才能发送请求获取数据，使用keyup在输入完词以后就会立即发送请求
var now = -1; //声明一个变量值为-1，在使用上下键的时候记录li的序号
var resLength = 0; //存li的长度
$('#txt').keyup(function(event) {
if (event.keyCode == 38 || event.keyCode == 40) { //每按一次上下键都会发送一次请求，所以要先
return; //清除一遍请求
};
console.log(event.which)
var dat = {
wd: $('#txt').val()
};
if ($('#txt').val() != '') { //当输入框的值不为空的时候才能发送请求
$.ajax({
type: "get",
url: "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
async: true,
data: dat,
dataType: 'jsonp', //已经跨域了
jsonp: 'cb', //百度的回调函数
success: function(res) {
console.log(res.s);
for (var i = 0; i < res.s.length; i++) {
resLength = res.s.length;
oli_i = $('<li>' + res.s[i] + '</li>');
console.log(oli_i)
$('#box ul').append(oli_i);
//要实现点击某一条词的时候也能让输入框中出现点击的这条词，所以要在success里面设置
$('#box ul li').eq(i).click(function() {
$('#txt').val($(this).text());
$(this).addClass('current').siblings().removeClass('current')
})
};
},
error: function(res) {
console.log(res)
}
});
} else {
$('#box ul').html('') //如果输入框的词都删除了，把获取的数据结果也清空，因为已经获取到数据了，即使阻止再次发送请求也不会把已经获得的数据清除，所以这里直接用了最简单的办法，直接清空数据
};
});
//在输入框中按上下键的时候对应的每一条数据的样式要有改变，这里使用了keydown这个事件足够了
$('#txt').keydown(function(ev) {
if (ev.keyCode == 40) { //按下键时，now应该变大
now++;
$('#box ul li').eq(now).addClass('current').siblings().removeClass('current')
$('#txt').val($('#box ul li').eq(now).text())
//resLength表示的是长度，now表示的是序号，所以要用resLength-1
if (now == resLength - 1) {
now = -1; //当选择的数据已经到了最底部的时候，就要从顶部开始重新循环，所以now又回到-1
}
};
if (ev.keyCode == 38) {
now--; //按上键的时候，光标往上走，所以now减小
$('#box ul li').eq(now).addClass('current').siblings().removeClass('current');
$('#txt').val($('#box ul li').eq(now).text())
if (now < -1) {
now = resLength - 1 //当光标走到最上面的时候，再循环到底部重新往上走
};
};
if (ev.keyCode == 13) { //当按下回车的时候，应该开始查询具体的结果了，所以这里用的是百度查询的接口
window.open('https://www.baidu.com/s?wd=' + $('#txt').val())
$('#txt').val('');
$('#box ul').html('')
}
})
//点击百度一下这个按钮的时候也要实现跳转页面
$('#btn').click(function() {
if ($('#txt').val() != '') {
window.location.href = 'https://www.baidu.com/s?wd=' + $('#txt').val()
$('#txt').val('');
$('#box ul').html('')
};
})
</script>
</body>
</html>祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星