前端ABC<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>qdabc.cn</title>
<style type="text/css">
/*li{
transition: 1s;
}
li:hover{
color: red;
}*/
</style>
</head>
<body>
<input type="text" name="search" id="search" value="" />
<ol>
</ol>
</body>
<script type="text/javascript">
var search = document.getElementById("search");
var ol = document.querySelector("ol");
search.onkeyup = function() {
var script = document.createElement('script')
script.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + this.value + '&cb=fn';
document.body.appendChild(script)
document.body.removeChild(script)
}
function fn(data) {
console.log(data);
var str = '';
for(var i = 0; i < data.s.length; i++) {
str += "<li>" + data.s[i] + "</li>"
}
ol.innerHTML = str;
}
ol.onmouseover = function(ev) {
var lis = document.getElementsByTagName('li')
ev.target.style.background = 'gold'
}
ol.onmouseout = function(ev) {
var lis = document.getElementsByTagName('li')
ev.target.style.background = ''
}
</script>
</html>
欢迎分享本文，转载请保留出处：前端ABC » JavaScript 跨域，百度搜索框功能