function Search(){
this.txt = document.getElementById(“txt”);
this.list = document.getElementById(“list”);
// 百度的搜索下拉菜单数据接口
this.url = “https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su”;
// 1.准备绑定事件
this.init();
}
Search.prototype.init = function(){
var that = this;
// this.txt.onkeyup = function(){
// 2.绑定事件
this.txt.oninput = function(){
// 3.判断是否为空
if(this.value){
// 4-1.不为空,请求数据
that.val = this.value;
that.load();
}else{
// 4-2.为空,清空数据
that.list.innerHTML = "";
}
}
}
Search.prototype.load = function(){
var that = this;
// 5.开启jsonp准备请求跨域数据
jsonp(this.url,function(res){
// 6.请求成功后,解析数据,准备渲染页面
that.res = res.s;
that.display();
},{
// 5-1.准备发送数据
wd:this.val, //百度要求的搜索关键字
cb:"sadkasjgdjsa", //百度要求的回调函数名
columnName:"cb" //自己要求的回调函数名所在的字段名
})
}
Search.prototype.display = function(){
// 7.解析数据,拼接结构
var str = "";
for(var i=0;i<this.res.length;i++){
str += `<li>${this.res[i]}</li>`
}
// 8.填充页面
this.list.innerHTML = str;
}
new Search();
来源:https://blog.csdn.net/qq_45264394/article/details/102757187