仿百度搜索
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>仿百度搜索</title>
</head>
<body>
<div class="searchDemo">
<input type="text" id="search_btn" />
<table cellpadding="0" cellspacing="0">
<tbody>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
</tbody>
</table>
</div>
</body>
<script type="text/javascript">
function hideTds(){
var tds = document.querySelectorAll('td');
for (var i = 0; i < tds.length; i++) {
tds[i].innerHTML = '';
};
}
// hideTds();
document.getElementById('search_btn').onkeyup = function(){
var s = document.createElement('script');
s.src = 'http://unionsug.baidu.com/su?wd=' + encodeURI(this.value.trim()) + '&p=3&cb=fn';
document.body.appendChild(s);
}
function fn(data){
console.log(data.s);
var tds = document.querySelectorAll('td');
data.s.forEach(function(value,index){
console.log(value,index);
tds[index].innerHTML = value;
})
var s = document.querySelectorAll('script');
for (var i = 1; i < s.length; i++) {
document.body.removeChild(s[i]);
};
}
document.querySelector('tbody').onclick = function(e){
var item = e.target.innerHTML;
console.log(item);
window.open('https://www.baidu.com/s?word='+encodeURI(item));
}
</script>
</html>
