在使用搜索引擎时，我们常常在输入框输入时下方出现相关推荐词，这是通过ajax异步请求实现的。
实现思路：通过得到输入输入框的值，然后使用百度的智能搜索接口发送ajax请求，得到返回的数据，并使用列表展现
关键知识：ajax,jsonp,keyup事件
具体代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>仿百度智能搜索</title>
<style>
* {
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.con {
width: 230px;
margin: 100px auto;
}
.box{
width: 230px;
background: #1ce90e;
padding: 10px;
}
#list ul{
width: 248px;
border: 1px solid #ccc;
}
#list li {
padding: 5px 10px;
}
</style>
</head>
<body>
<div class="con">
<div id="box" class="box">
<input type="text" name="search" id="txt">
<input type="button" name="btn" value="search">
</div>
<div id="list"></div>
</div>
</body>
<script src="jquery-1.11.2.js">
</script>
<script>
//https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=
$(function() {
$("#txt").keyup(function() {
console.log($("#txt"));
var txt = $("#txt").val(); //得到搜索框的值
console.log(txt);
var url = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + txt;
search(url);
});
});
function search(url) {
document.getElementById('list').innerHTML = '';
$.ajax({
type: 'get',
async: true,
url: url,
dataType: 'jsonp',
jsonp: 'cb', //传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名（默认为：callback)
// jsonpCallback: 'callback', //自定义的jsonp回调函数名称,默认为JQuery自动生成的随机函数名，如：jQuery110208321269858078724_1542071577078(['aaa','bbb']);
success: function(data) {
console.log(data);
document.getElementById('list').innerHTML = '';//2019.8.31添加
var ul = $("<ul></ul>");
$.each(data.s, function(i, elem) {
var ele = $("<li></li>").append(elem);
$(ul).append(ele);
});
$("#list").append(ul);
},
error: function() {
console.log('fail');
}
})
}
</script>
</html>具体效果可见：仿百度智能搜索
2019.8.31完善：解决出现两个下拉框的问题，在ajax请求成功的函数中先清除下拉框数据
